JQuery IE jerky slide animation

Question

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

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

This shows and hides a div with the following markup:

<div class="details">
  <p>Date</p>
  <p>Text</p>
</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.

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?

Answer 1

Your margins are likely collapsing. When you apply a float, overflow: auto or overflow: hidden to the slided element, that should no longer occur.

jQuery sets overflow: hidden during the animation, so the margins don't collapse. When the animation is done, this property is removed. The margins of the <p> collapse again, hence you get a little jerky jump at the end.

Answer 2

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>

Answer 3

I had the same issue, and what I did was animate the margin and padding during the slide:

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

Setting them both to slow will assure that they complete at the same time.