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

2011年07月26日17:56:36 4 已收录 11,306

使用用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.

  1. $('#fadingElement').fadeIn(2000, function(){   
  2.        this.style.removeAttribute('filter');   
  3. });  

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.

  1. (function($) {   
  2.     $.fn.customFadeIn = function(speed, callback) {   
  3.         $(this).fadeIn(speed, function() {   
  4.             if(jQuery.browser.msie)   
  5.                 $(this).get(0).style.removeAttribute('filter');   
  6.             if(callback != undefined)   
  7.                 callback();   
  8.         });   
  9.     };   
  10.     $.fn.customFadeOut = function(speed, callback) {   
  11.         $(this).fadeOut(speed, function() {   
  12.             if(jQuery.browser.msie)   
  13.                 $(this).get(0).style.removeAttribute('filter');   
  14.             if(callback != undefined)   
  15.                 callback();   
  16.         });   
  17.     };   
  18. })(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

weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:4   其中:访客  3   博主  1

    • 知更鸟 Admin

      加上背景色后,没想到从IE6到IE9,竟然是IE6效果最好,该死的IE真是变态…

      • 数据恢复培训 4

        厉害 真是由说不清的问题啊

        • 英语四级成绩单 1

          其他浏览器都还可以, 但国内的IE用户,还是比较多的

          • 火晴云 0

            测试了一下方法二和方法三 都没起作用。。。