So, I am all excited about the simple animations available in jQuery (i.e - show("fast") ), and when I go to use it, the text inside the element being shown is all ugly, or garbled, or whatever you want to call it... it's not the text I wanted...

Before applying the animation my page looks like this (in Internet Explorer 7):

After hiding and showing the wrapper div my text is not as smooth as it was before...

In Firefox, everything looks fine.  What's up?  It appears to be related to an issue with ClearType in Internet Explorer.

This is something to do with how jQuery sets the styles on elements that are being animated.  I think the culprits are "filter" and/or "opacity" styles that are set.

One, easy solution for me has been to use the jQuery .slideDown() and .slideUp() animations instead of .show("fast") and .hide("fast").  Apparently slideUp() and slideDown() apply different styles.. I don't think they animate the opacity or filters.

Some resources I found online...

IE7, ClearType, DXImageTransforms and Fade Animation Fuzziness - Matt Berseth

ClearType with DXTransforms in IE7 - the IE Blog