JQuery IE jerky幻灯片动画

Question

我有以下代码来动画显示/隐藏div。

$(".headerClosed, .headerOpen").live("click", function(){
  $(this).next().slideToggle("slow");
}

这会显示并隐藏带有以下标记的div：

<div class="details">
  <p>Date</p>
  <p>Text</p>
</div>

问题在于IE（惊喜，惊喜！）当div向下滑动时动画是平滑的，直到它突然结束。我知道这是由于div的填充/边距设置。

如果我使用＆lt; div＆gt;而不是＆lt; p＆gt;然后动画是平滑的，但只要我向＆lt; div＆gt;添加任何填充或边距。然后动画混蛋。如果填充和边距设置让它变得混乱，你怎么能用间距向下滑动看起来漂亮的div？

Answer 1

您的保证金可能会崩溃。当您将float，overflow: auto或overflow: hidden应用于滑动元素时，应该不再出现。

jQuery在动画期间设置overflow: hidden，因此边距不会崩溃。动画完成后，将删除此属性。 <p>的边缘再次崩溃，因此最后会有一点跳跃。

Answer 2

将div包含在另一个div中。将填充/边距添加到内部div，并在外部div上调用动画。

<div class="details">
   <div class="hasMargins">
    <p>Date</p>
     <p>Text</p>
   </div>
</div>

Answer 3

我有同样的问题，我所做的是在幻灯片中为边距和填充设置动画：

$(this).next().slideToggle("slow");
$(this).next().animate({ margin: "XXpx", padding: "XXpx" }, "slow");

将它们设置为慢速将确保它们同时完成。