Using jQuery animate CSS opacity fade and @font-face gives Internet Explorer very ugly font rendering?

Question

I\'m working on a site with HTML/CSS/jQuery that is trying to act like a Flash site. I\'ve had to use @font-face to get the desired font to work. The client wants the fade in of

Answer 1

As mentioned in other answers, jQuery uses the IE-only CSS property filter for opacity in Internet Explorer. It is the use of this property that causes the text rendering problems.

If you remove the CSS filter when your animation is complete then the anti-aliasing on the text will be restored:

$('#site').animate({opacity: '1.0'}, 1000, function() {
  $(this).css('filter', 'none');
});

It will still look jagged while the animation is in progress, but it may not be noticeable if the animation is quick.

(This was a known jQuery bug and has since been fixed: http://dev.jquery.com/ticket/6652)