关于jQuery fadeIn() & fadeOut()在IE中的问题

使用用jQuery  fadeIn()可以实现淡入效果，比如我目前用的主题侧边TAB菜单，就具有此效果，但是在IE浏览器下模样大变，文字周围总是有那么一小段时间显示重影，虽然通过给其中的元素加个背景色，可一定缓解问题，但总是不理想，转老外的一篇相关文章，研究研究，估计都不会达到其它浏览器的效果。

I’ve noticed that when I use the jQuery .fadeIn() or .fade­Out() method I see ugly pix­e­lated text in Inter­net Explorer after the ani­ma­tion has com­pleted. This seems to be related to an issue with an IE spe­cific style fil­ter called clearType. To solve the prob­lem, you need to remove the clearType fil­ter after your jQuery ele­ment has faded in. There are a few ways to do this:

Pre­view / Sam­ple / Demonstration

3 Ways to Fix The Issue

1. Add a Back­ground Color

Set a back­ground color with CSS on the ele­ment that is fad­ing in or out. This is the most basic way to solve the problem.

2. Remove the clearType Filter

After fad­ing in an ele­ment you can add this sim­ple call­back func­tion to fix the bug.

3. Use a Cus­tom fadeIn/Out Method

This method serve’s as a replace­ment for the built-in fadeIn() & fade­Out() meth­ods for jQuery.

After you add this method to your JavaScript, change your ‘fade­Out’ to ‘cus­tom­Fade­Out’ and your ‘fadeIn’ to ‘cus­tom­FadeIn’. See a sam­ple of this method on the demo page. Thanks to Ben­jamin Novakovic for writ­ing this jQuery plugin

Ugly Tran­si­tions on Ani­mated Elements

When you ani­mate any­thing in IE there is an ugly tran­si­tion effect that occurs before the fix is applied. There’s no way to pre­vent or fix clearType while the fade occurs. A work-around is to fade some­thing else, like a <div> on top that fades in, rather than your text content.

Advanced Sce­nar­ios

There are more IE related issues that peo­ple have men­tioned see­ing in advanced setups as well.

I found that the answer was to set the z-index. I have a stack of absolutely posi­tioned divs and wanted to fade between them. The only way I could get IE8 to han­dle the fades nicely was to set the z-index of the ele­ment to be faded in higher than the ele­ment to be faded out i.e.:

1. $('#fadeoutdiv').css({zIndex:99}).fadeOut(2000);   
2. $('#fadeindiv').css({zIndex:90}).fadeOut(2000);  

Thanks to Al Flemming

A demon­stra­tion for Al’s fix has been added to the demo page
Resources

jQuery in Action: If you find your­self fre­quently using jQuery in your projects I would highly rec­om­mend check­ing out this book. I’ve read this and also Learn­ing jQuery 1.3 and have found jQuery in Action to be clearer, more straight for­ward and more powerful.
jQuery IE Fade Test
jQuery Ref­er­ence Guide jQuery fadeIn() & fadeOut(): Problems in Internet Explorer
jQuery fadeIn/fadeOut IE Cleartype Glitch