jQuery, Animate opacity to 1 then remove the opaci

Question

I tried the jQuery fadeIn animation in all browsers and it work good, but not that much on IE. the Alpha png images are so creepy after appending the 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 in order to make the picture quality better.

How to do that?

Note: i'm using Animate and not FadeIn.

Thanks

Answer 1

You can do this:

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

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

Answer 2

If you set the opacity with jQuery to begin with (as 0):

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

then after you fade it in, you can just:

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

as the above answer didn't work for me in IE <= 8