【问题标题】：Why does this line 'jump' when I call slideDown?为什么当我调用 slideDown 时这条线会“跳跃”？
【发布时间】：2010-07-27 05:29:40
【问题描述】：

由于代码比较多，这里就不贴了。相反，您可以找到所有内容here。这样你就可以玩弄它并运行它：

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>

当“放下我！”时，问题就出现了链接被点击。 DIV 像预期的那样向下滑动，但在结尾处突然“跳跃”。

为什么会这样，我怎样才能让它消失？

【问题讨论】：

标签： jquery animation slide

【解决方案1】：

实际上你不需要这些。只需给你的隐藏元素一个宽度：

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

它会起作用的！

PS：我把整个周末都花在这上面了……

【讨论】：

简单的解决方案！我需要设置溢出：隐藏；还有，tnx！

【解决方案2】：

demo

codes link

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

类似problem answered

【讨论】：

是的！有用！那么问题是它需要事先明确设置高度吗？
是的！.. 这就是问题... ;)
希望我能给你 +2 :) 谢谢一百万！

【解决方案3】：

为隐藏的 div 设置一个高度。 jsfiddle

编辑。找到了一些答案here。您可以存储每个元素的高度，然后重新应用它。不适合您的情况，但可能是一个起点

【讨论】：

但是如果内容发生变化并且不再适合该行怎么办？我的示例中的 sn-p 是一个较大页面的一部分，该页面有很多这样的行，并且不能保证它们是单行的。
哇，不要使用最小高度。这很时髦..现在尝试其他选择。