slideDown和slideUp错误

Question

我刚接触jQuery，但是已经发现了内置的slideDown()/slideUp()动画存在问题。我正在使用一个具有灵活宽度的元素，在使用该函数时，该元素不会返回到其完整的宽度。我认为这可能与jQuery查找元素宽度的方式有关。我在Safari 3和Firefox 3.1 for OS X中遇到了这个错误。以下是页面的html代码：

<div id="archive">
    <h2 class="first open">May</h2>
    <table width="100%" cellspacing="0" cellpadding="0" border="0" class="list">
         <tr class="first">
              <td width="65%"><a href="#">This month</a></td>
              <td align="right">Sunday, May 31   <input type="button" value="Edit"/></td>
         </tr>
    </table>
</div>

以下是JavaScript代码：

// Enable month names to re-open divs
$("#archive h2").not(":last").wrapInner("<a href='#'></a>").end().find
("a").click(function(event){

event.preventDefault();

var h2 = $(this).parent();

if (h2.hasClass("open")) { // Close

    h2.removeClass("open");
    h2.next().slideUp("fast");


} else { // Open

    h2.addClass("open");
    h2.next().slideDown("fast");


}

});

问题可以通过将

包裹在中来解决，但是在Firefox中会出现新的错误，在slideDown动画接近结束时跳跃。

任何帮助都将不胜感激。 谢谢， Brendan

- bloudermilk

Answer 1

“跳跃”发生的原因是H2元素具有边距，根据CSS垂直边距的规则，它们会合并。

在动画开始之前，您有用表格分隔的H2标题。标题上下有一些边距，表格没有：

+--------------------------+
|                          |
|H2: April                 |
|                          |
+--------------------------+
||||||||||||||||||||||||||||
|TABLE in the middle       |
||||||||||||||||||||||||||||
+--------------------------+
|                          |
|H2: May                   |
|                          |
+--------------------------+

然后，表格平滑地动画离开，只留下两个标题：

+--------------------------+
|                          |
|H2: April                 |
|                          |
+--------------------------+
|                          |
|H2: May                   |
|                          |
+--------------------------+

然后突然之间这些标题之间没有表格了，边距会折叠，给你类似于这样的东西：

+--------------------------+
|                          |
|H2: April                 |
|                          |
|H2: May                   |
|                          |
+--------------------------+

我是一名有用的助手，可以为您翻译文本。

这个崩溃引起了“跳跃”。

解决这个问题的一个可能方法是将H2边距替换为填充：

#archive h2 {
  margin: 0;
  padding: 0.5em 0;
}

填充不会折叠。

- Rene Saarsoo

---

有关表格无法填满100％宽度的任何想法吗？ - bloudermilk

不知道，可能还有其他元素在路上，所以它们无法展开到全宽。 - Rene Saarsoo

优秀的基于Markdown的解释。澄清了很多事情。 - AeroCross

Answer 2

事实证明，解决方法是将每个表格嵌套在一个div中，然后将表格宽度设置为固定宽度。在我的情况下，是"600px"。我进行了一些实验，据我记得，当jQuery找到元素的高度时，它将其设置为position: absolute; visibility: none;，这在我的情况下使得100%的宽度没有什么可以比较的，导致呈现出类似于100像素宽，比应该更高。所以jQuery动画到那个高度，然后将一切恢复正常，导致浏览器回弹到真实高度。

- bloudermilk