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");


}

});

这个问题可以通过包装in来解决,但随后在Firefox中出现一个新的错误,其中slideDown动画跳到最后.

任何帮助,将不胜感激.

谢谢,布兰登

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;
}

填充物不会崩溃.