internet explorer - jQuery fadeIn leaves text not anti-aliased in IE7

Question

Why does this happen? Any workarounds?

jQuery:

$(function() {
   $('p.quote').fadeIn(3000);
});

HTML:

<p>someone said:</p>
<p class="quote">&ldquo;lorem ipsum&rdquo;</p>
<p>someone else said:</p>
<p class="quote" style="display: none;">&ldquo;magna carta&rdquo;</p>

Answer 1

There is a known bug with IE and the fadeIn/fadeOut functions and their effect on text elements. Check out the info here:

http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/

Looks like my original link has since gone dead. Updated with a different solution from the comments:

http://malsup.com/jquery/cycle/cleartype.html

The workaround is to remove the 'filter' property of the element in a callback function after fadeIn() has finished.