jQuery IE生涩的幻灯片动画 [英] JQuery IE jerky slide animation

问题描述

我有以下代码可以使div的显示/隐藏动起来.

I have the following code to animate the showing/hiding of a div.

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

这将显示和隐藏具有以下标记的div:

This shows and hides a div with the following markup:

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

问题出在IE(惊讶，出乎意料！)中，当div向下滑动时，动画是平滑的，直到猛拉结束为止.我知道这是由于div的填充/边距设置.

The problem is in IE(surprise, surprise!) when the div slides down the animation is smooth until the end when it jerks. I know this is due to the padding/margin settings of the div.

如果我使用< div>而不是< p>那么动画是平滑的，但是只要我在< div>中添加了任何填充或边距，然后是动画混蛋.如果填充和边距设置变得令人讨厌，如何将带有间隔的漂亮div滑下来?

If I use a <div> instead of <p> then the animation is smooth, but as soon as I add any padding or margin to the <div> then the animation jerks. How can you slide down a nice looking div with spacing if the padding and margin settings make it jerk?

推荐答案

将div包裹在另一个div中.将填充/边距添加到内部div，然后在外部div上调用动画.

Wrap the div inside another div. Add the padding/margin to the inner div, and call the animation on the outer div.

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

这篇关于jQuery IE生涩的幻灯片动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！