Why does this line 'jump' when I call slideDown?

jquery animation slide

12,489

Solution 1

demo

.hidden_data {
    overflow: hidden;
    display:none; /* <--- remove this */
    padding: 10px;
    font-style: italic;
    color: #777;
}

Solution 2

Actually you don't need any of this. Just give your hidden element a width:

.hidden_data {
    display: none;
    padding: 10px;
    font-style: italic;
    color: #777;
    width: 300px;
}

It will just works!

PS: I spent all the weekend on this...

12,489

Author by

Nathan Osman

Email: [email protected] By profession, I am a software developer and I work with C++, Python, and (more recently) Go. Here are some of my recent projects: - Hectane - lightweight SMTP server written in Go - NitroShare - a cross-platform network file transfer utility - REST Easy - Firefox add-on for analyzing HTTP responses

Updated on June 14, 2022

Comments

Nathan Osman almost 2 years

Since there's a lot of code, I won't post it here. Rather, you can find it all here. That way you can play around with it and run it:

function P_Expand(item_id) {
  $('#p_' + item_id).slideToggle();
}

.data_table {
  width: 650px;
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
}
.data_table tbody th {
  border-bottom: 1px solid #555;
  text-align: left;
}
.data_table tbody tr td a {
  color: #8b9cb0;
  text-decoration: none;
}
.hidden_data {
  display: none;
  padding: 10px;
  font-style: italic;
  color: #777;
}

<table class='data_table'>
  <tbody>
    <tr>
      <td>
        <a href='javascript:void(0)' onclick='P_Expand(9)'>Drop me down!</a>
      </td>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td colspan='3' style='background-color: #eee'>
        <div id='p_9' class='hidden_data'>
          <p style="margin: 0px;">Donec dolor urna, vehicula in elementum eget, auctor dignissim nibh. Morbi et augue et nisi.</p>
        </div>
      </td>
    </tr>
    <tr>
      <td>Line number 2...</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

The problem happens when the 'Drop me down!' link is clicked. The DIV slides down as expected, but makes a sudden 'jump' right at the end.

Why does it do this, and how can I make it go away?

Nathan Osman almost 14 years

But what if the content changes and it no longer fits on the line? The snippet in my example is part of a larger page that has lots of those lines and they're not guaranteed to be one-liners.
hookedonwinter almost 14 years

Whoa, don't use min-height. That's just funky.. Trying other options now.
Nathan Osman almost 14 years

Yes! It works! So the problem is that it needs to have an explicit height set beforehand?
Reigel Gallarde almost 14 years

yeap!.. that's the problem... ;)
Nathan Osman almost 14 years

Wish I could give you +2 :) Thanks a million!
DownDown about 11 years

Simple solution! I need to set overflow:hidden; aswell, tnx!