2

当我在表格中使用 jQuery slideUp 和 slideDown 时，我遇到了一个小问题。我有这样的html（也主要由jQuery生成，但并不重要）：

<tr class="expandable-container">
  <td colspan="10">
    <div id="3_expandable" style="display: none;">
      <table class="innerTable">
        ...
      </table>
    </div>
  </td>
</tr>

外桌样式：

.main-table {
    border-radius: 0.5em 0.5em 0 0;
    width: 129em;
    background-color: #f1f1f1;    
    margin-top: 1.5em;
    z-index: 10;
    position: relative;
}

.main-table td, .main-table th {
    padding: 1.2em 0.7em;
    border-collapse: collapse;
    border-left: 0.1em solid #dedede;
}

.main-table td:first-child, .main-table th:first-child {
    border-left: 0 solid;
}

.expandable-container td {
    padding: 0 !important;
    background-color: red; /* inserted to identify the problem */
}

由于 slideUp 和 slideDown 不适用于表格元素，我将我的内容（这是另一个表格，但它并不重要）包装在一个 div 中，这当然是隐藏的。当我应用 slideUp 和 slideDown 方法并在 Firefox 6 上对其进行测试时，由于某种原因，动画出现了跳跃。所以我设置了一个 10 秒长的滑动时间来检查它，我确定当动画开始时， td 元素立即出现 height == 20px 并且 div 在其中向下滑动。然后一切都按预期进行 - 当 div 超过 td 的初始意外高度时，它会覆盖它并扩展到它的预期大小。

这发生在 Firefox 6 上。它在 Chrome 13 上没有任何问题。我没有在任何版本的 IE 上测试它，因为它不是预期的浏览器，所以我不必在安装它时遇到所有麻烦一台linux机器。也没有在 Opera 上测试，因为现在其他一些脚本在它上面崩溃了，这是要修复的。

我附上了 slideDown 动画第一时刻的屏幕截图 - 当 td 突然出现时（红色背景）。

slideDown - 第一阶段

我的问题 - 有没有办法或解决方法来解决它？

正如 Ariel 建议的那样，我将其添加为 jsFiddle。奇怪的是，它在那里运行良好，即使在 FF6 上： jsFiddle 演绎

编辑：我修复了导致 Opera 11 崩溃的问题，因此我能够对其进行测试。所以 - 它也发生在 Opera 11 上。

4

1 回答 1

2

根据小提琴和您的症状，我认为这与填充或边距（可能是边距）有关。即，一旦元素可见，它就有一个不包含在高度动画中的边距。

但是，我不能真正肯定地回答，因为我没有看到它发生。（您可能应该尝试找出小提琴与您的实际代码有什么不同 - 尝试注释掉 css 的部分。）

于 2011-09-14T08:56:25.240 回答