JQuery IE jerky slide animation

internet-explorer, jquery

Solution

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>

Problem

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?

Original source