使用 jQuery 为文本的不透明度设置动画时更正 IE Cleartype/Filter 问题答案

【问题标题】：Correcting IE Cleartype/Filter Problem when Animating Opacity of Text with jQuery使用 jQuery 为文本的不透明度设置动画时更正 IE Cleartype/Filter 问题
【发布时间】：2011-06-01 15:05:16
【问题描述】：

大家好，我遇到了一个 IE 问题，这似乎是一个众所周知/常见的错误。我有一个在 jQuery 中构建的图像幻灯片，它在其他浏览器中可以完美运行。但是，在 IE 中，一旦幻灯片放映一次，我就遇到了文本被消除锯齿的问题。也就是说，如果幻灯片中有三张图片，那么当这三张图片中的每一张第一次出现时，文本就会正确呈现。但是，一旦幻灯片放映循环播放文本，就会消除锯齿。

我已经阅读了这方面的内容，并浏览了无数关于如何最好地纠正它的博客。我遇到的最常见的解决方法是在不透明度达到 100% 时删除过滤器属性，如下所示：

$('#sample').animate( {opacity:1.0}, 500,
function() {
    $(this).css('filter','');
}

);

这似乎应该有效。但由于我仍然不是 jQuery 大师，我很难找到应该在我的代码中实现它的位置。我尝试过的任何地方，要么停止幻灯片放映，要么将其炸毁，并导致所有图像同时在页面上下显示。

以下是我正在使用的代码，非常感谢你们能给我的任何帮助，为我指明正确的方向。谢谢！

   if(options.fade === true) {

 $("ul",obj).children().css({
 'width' : $("ul",obj).children().width(),
 'position' : 'absolute',
 'left' : 0

 });

 for(var i = $("ul",obj).children().length -1, y = 0; i >= 0; i--, y++) {
 $("ul",obj).children().eq(y).css('zIndex', i + 99999);

 }


 fade();
} 

 function fade() {

 setInterval(function() {
  $("ul",obj).children(':first').animate({ 'opacity' : 0}, options.speed, function() {      
  $("ul",obj)
    .children(':first')
    .css('opacity', 1)
    .css('zIndex', $("ul",obj).children(':last').css('zIndex') - 1)
    .appendTo("#db-slider-ul");   

     });


 }, options.pause);
 }

});

【问题讨论】：

标签： jquery internet-explorer text jquery-animate opacity

【解决方案1】：

将此添加到新的 js 文件中，例如 jquery.fadefix.js：

jQuery.fn.fadeIn = function(speed, callback) { 
    return this.animate({opacity: 'show'}, speed, function() { 
        if (jQuery.browser.msie)  
            this.style.removeAttribute('filter');  
        if (jQuery.isFunction(callback)) 
            callback();  
    }); 
}; 

jQuery.fn.fadeOut = function(speed, callback) { 
    return this.animate({opacity: 'hide'}, speed, function() { 
        if (jQuery.browser.msie)  
            this.style.removeAttribute('filter');  
        if (jQuery.isFunction(callback)) 
            callback();  
    }); 
}; 

jQuery.fn.fadeTo = function(speed,to,callback) { 
    return this.animate({opacity: to}, speed, function() { 
        if (to == 1 && jQuery.browser.msie)  
            this.style.removeAttribute('filter');  
        if (jQuery.isFunction(callback)) 
            callback();  
    }); 
};

并在页面中的主 jquery 脚本之后包含此文件。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.fadefix.js"></script>

Fade 现在可以在 IE 中按预期工作。

【讨论】：

【解决方案2】：

更容易做到这一点：

$("#sample").fadeIn(1000,function(){this.style.removeAttribute("filter");});

或

$("#sample").fadeOut(1000,function(){this.style.removeAttribute("filter");});

或

$("#sample").show(1000,function(){this.style.removeAttribute("filter");});

或

$("#sample").hide(1000,function(){this.style.removeAttribute("filter");});

【讨论】：

【解决方案3】：

遇到了同样的问题。我绞尽脑汁想弄清楚为什么这个解决方案对其他人有效，但对我无效。

我找到的解决方案是将“过滤器”添加到 animate() 函数中。所以，以你原来的函数为起点：

$('#sample').animate({'opacity':1.0,'filter':''},500);

这对我来说非常有效。希望这可以帮助像我一样一直在谷歌搜索的其他人。

【讨论】：