jquery - 纠正使用 jQuery 对文本的不透明度进行动画处理时的 IE Cleartype/Filter 问题

Question

大家好，我遇到了一个 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);
 }    

});

Answer 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>

淡入淡出现在可以在 IE 中按预期工作。