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

Posted 2023-03-06

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

【英文标题】：Correcting IE Cleartype/Filter Problem when Animating Opacity of Text with jQuery

【发布时间】：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);
     

);

【参考方案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);

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