更正使用jQuery设置文本不透明度动画时IE Cleartype/过滤器问题

嘿，大家好，我对IE有一个问题，这似乎是一个相当知名/常见的bug。我在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);
 }    

---

}))

将其添加到一个新的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>

---

淡入淡出现在将如IE中预期的那样工作。也有同样的问题。我绞尽脑汁想弄明白为什么这个解决方案适用于其他人，但不适用于我

我找到的解决方案是将“过滤器”添加到animate（）函数中。因此，使用原始函数作为起点：

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

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

更容易做到这一点：

$("#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");});