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的填充/边距设置.

如果我使用<div>而不是<p>,那么动画是平滑的,但只要我向<div>添加任何填充或边距,那么动画就会抖动.如果填充和边距设置让它变得混乱,你怎么能用间距滑下漂亮的div？

Answer 1

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

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