代码之家 › 专栏 › 技术社区 › Nathan Osman

为什么我叫slideDown时这行会跳?

slide animation jquery

Nathan Osman · 技术社区 · 14 年前

既然有很多代码,我就不在这里发布了。相反,你可以找到一切 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按预期滑下,但在结尾处突然“跳跃”。

它为什么这样做,我怎样才能让它消失?

3 回复 | 直到 9 年前

Community CDub 4 年前

demo

codes link

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

类似的 problem answered

Victor Teixeira 14 年前

只需为隐藏元素指定宽度:

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

它会起作用的!

PS:我整个周末都在这个。。。

hookedonwinter 14 年前

给隐藏的div设定一个高度。 jsfiddle

编辑。找到了一些答案 here

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前