JQuery, animating opacity to 1, then remove the opacity property so that it looks better on IE

Question

I tried jQuery fadeIn animation in all browsers and it works well, but not so much in IE. Alpha png images are so creepy after adding CSS opacity, but I have an idea and I don’t know how to implement it using jQuery.

The idea is to fadeIn the element, and when the animation is finished, it will automatically remove the opacity property to improve image quality.

How to do it?

Note: I use Animate, not FadeIn.

thanks

Answer 1

You can do it:

$(selector).animate({opacity: 1}, function() { $(this).get(0).style.removeAttribute('filter'); }); 

The IE filter uses what makes ClearType basically shut off. Remove this style attribute after fade completes, like the code above, to restore ClearType to working condition. You can also find the replacement methods fadeIn() , fadeOut() and fadeTo() that address this issue here: http://malsup.com/jquery/fadetest.html

Answer 2

If you set the opacity using jQuery starting at (like 0):

 $(object).css("opacity", 0); 

then after you fade out, you can simply:

 $(object).fadeIn("slow", function(){ $(object).css("opacity", ""); }); 

as the answer above did not work for me in IE <= 8