slideDown 和 slideUp 错误答案

【问题标题】：slideDown and slideUp errorsslideDown 和 slideUp 错误
【发布时间】：2009-06-03 01:16:37
【问题描述】：

我是 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 动画在接近尾声时跳转。

任何帮助将不胜感激。

谢谢，布伦丹

【问题讨论】：

标签： javascript jquery css

【解决方案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;
}

填充不会折叠。

【讨论】：

关于表格没有填满 100% 宽度的任何想法？
不知道，可能还有其他元素在路上，所以无法展开到全宽。
优秀的基于 Markdown 的解释。清理了很多的东西。

【解决方案2】：

事实证明，解决方法是将每个表格嵌套在一个 div 中，然后将表格宽度设置为静态宽度。就我而言，“600px”。我做了一些实验，我记得，当 jQuery 找到一个元素的高度时，它会将其设置为 position: abolsute;可见性：无；在我的情况下，它留下了 100% 的宽度，没有什么可比较的，呈现为 100px 宽，并且比它应该的高。所以 jQuery 动画到那个高度，然后将一切恢复正常，导致浏览器快速恢复到真实高度。

【讨论】：