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垂直边距的规则将collapse发生“跳跃”。

在动画开始之前，你会用表格分隔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;
}

填充物不会崩溃。

Answer 2

事实证明，修复是将每个表嵌套在div中，然后将表宽度设置为静态宽度。就我而言，“600px”。我做了一些实验，并且我记得，当jQuery找到一个元素的高度时，它将它设置为position：abolsute; visibility：none;，在我的情况下，它留下了100％的宽度，没有任何东西可以比较自己，呈现像100px宽的东西，并且比应该的高。所以jQuery动画到那个高度，然后将所有内容恢复正常，使浏览器快速恢复到真正的高度。

slideDown和slideUp错误

2 个答案: