Animate opacity doesn't work properly on IE

Question

I\'m trying to use animate() to change the height and opacity of a div. The div has an image background in CSS. It works fine on Firefox and Safari

Answer 1

Very (very) late with the answer, but as this is at the top of Google when I looked for help with a jquery v animate issue in IE8 I thought i'd post it here.

My problem was connected to the hasLayout bug in IE, and adding "display: inline-block" to the element to be faded fixed the problem.

Answer 2

I've been having the same problem. I stumbled into the answer, when I set the opacity to 40%:

$('#list_box').stop().animate({opacity: '.4'},"slow");

I noticed that made the opacity jump to 100%, then animate down to 40%. Eureka.

So, now I explicitly set the opacity to zero before the animation:

$('#list_box').css({opacity:0}).stop().animate({opacity: '1'},"slow");

That animates smoothly, except the text still looks horrible in IE.

To clean up the text, I removed the opacity from the css in IE after the animation. This seems to clear up the text quite a bit in IE6 and IE8.

$('#list_box').css({opacity:0}).stop().animate({opacity: '1'},"slow",function(){
    //remove the opacity in IE
    jQuery.each(jQuery.browser, function(i) {
        if($.browser.msie){
            $('#list_box').css({opacity:''});
        }
    });
});

I'm testing it on a Mac in Parallels, in IE6 and IE8. Everything seems to work fine on the Mac side.