Today I encountered a problem I thought I should post about.

When you try to animate an element that has children (for example DIVs) positioned relative or absolute on Internet Explorer 8 these children will not animate, in fact they will not do anything the parent does. I tested this animating the opacity.

<div class="main">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>

If classes ’second’ and ‘third’ are positioned relatively or absolutely that will not be animated using this:

$(".main").animate({opacity : 0}, 500);

The best solution I found was to hide the elements after the animation has ended. So, after the animation ended I forced those DIVs to take their end values directly, no animation involved. This method will skip the animation only on IE8 and other browsers with the same problem.

First I needed to add another class to the problematic DIVs:

<div class="main">
<div class="first"></div>
<div class="second problem"></div>
<div class="third problem"></div>
</div>

And I modified the Javascript like this:

$(".main").animate({opacity : 0}, 500, function(){$(".main").find(".problem").css('opacity', 0);});