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

2011年7月26日 17:56:36知更鸟

知更鸟

站长

2332
文章

0
粉丝

Web前端411,875阅读模式

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

I’ve noticed that when I use the jQuery .fadeIn() or .fadeOut() method I see ugly pixelated text in Internet Explorer after the animation has completed. This seems to be related to an issue with an IE specific style filter called clearType. To solve the problem, you need to remove the clearType filter after your jQuery element has faded in. There are a few ways to do this:

Preview / Sample / Demonstration

3 Ways to Fix The Issue

1. Add a Background Color

Set a background color with CSS on the element that is fading in or out. This is the most basic way to solve the problem.

2. Remove the clearType Filter

After fading in an element you can add this simple callback function to fix the bug.

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

3. Use a Custom fadeIn/Out Method

This method serve’s as a replacement for the built-in fadeIn() & fadeOut() methods for jQuery.

(function($) {
$.fn.customFadeIn = function(speed, callback) {
$(this).fadeIn(speed, function() {
if(jQuery.browser.msie)
$(this).get(0).style.removeAttribute('filter');
if(callback != undefined)
callback();
});
};
$.fn.customFadeOut = function(speed, callback) {
$(this).fadeOut(speed, function() {
if(jQuery.browser.msie)
$(this).get(0).style.removeAttribute('filter');
if(callback != undefined)
callback();
});
};
})(jQuery);

After you add this method to your JavaScript, change your ‘fadeOut’ to ‘customFadeOut’ and your ‘fadeIn’ to ‘customFadeIn’. See a sample of this method on the demo page. Thanks to Benjamin Novakovic for writing this jQuery plugin

Ugly Transitions on Animated Elements

When you animate anything in IE there is an ugly transition effect that occurs before the fix is applied. There’s no way to prevent or fix clearType while the fade occurs. A work-around is to fade something else, like a <div> on top that fades in, rather than your text content.

Advanced Scenarios

There are more IE related issues that people have mentioned seeing in advanced setups as well.

I found that the answer was to set the z-index. I have a stack of absolutely positioned divs and wanted to fade between them. The only way I could get IE8 to handle the fades nicely was to set the z-index of the element to be faded in higher than the element to be faded out i.e.:
$('#fadeoutdiv').css({zIndex:99}).fadeOut(2000);
$('#fadeindiv').css({zIndex:90}).fadeOut(2000);
Thanks to Al Flemming

A demonstration for Al’s fix has been added to the demo page
Resources

jQuery in Action: If you find yourself frequently using jQuery in your projects I would highly recommend checking out this book. I’ve read this and also Learning jQuery 1.3 and have found jQuery in Action to be clearer, more straight forward and more powerful.
jQuery IE Fade Test
jQuery Reference Guide jQuery fadeIn() & fadeOut(): Problems in Internet Explorer
jQuery fadeIn/fadeOut IE Cleartype Glitch

本站文章大部分为原创，用于个人学习记录，可能对您有所帮助，仅供参考！