jquery - blurry text in IE

Please take a look at http://jumardirectsites.com/_dev/kabnick/ using Internet Explorer. When the sl开发者_运维百科ides fade, the text gets a horrible blurry outline for a moment before disappearing. Its happening in IE7, 8 and 9. How can I fix this?

Zach

First, make sure you have no errors in your javascript. When I navigated in the page, I received a javascript exception which might have disabled part of your functionality.

As for the blurring, it's caused by the change in alpha work on all pixels in the target frame. It will mess up with the font smoothing. I'm kind of surprised that you get this problem with IE9. What you could possibly do is to put the text IN the images instead of putting it in front of it. Try to make sure to keep the background behind the text a static color between each changes and the problem SHOULD go away. I think the problem right now is that you have two images blended in each others and the text smoothing get messed up.

Another thing you could do is fade one content to white and then fading the other content from white to full color. This way, you'd get a better viewing experience and it would easier for people to see that a change is occurring.

I do not see it myself in IE9, or 8 and 7 utilizing the developer tools in IE. However, I have had the experience myself in IE when implementing transparency. The only acceptable solution I found was to make the entire area an image, text and all.