使用jQuery动画文本的不透明度时，修正IE Cleartype / Filter问题

嘿所有，我有一个IE的问题，似乎是一个相当已知/常见的错误。 我有一个图像幻灯片放映我在jQuery中构建，在其他浏览器中完美运行。 然而，在IE中，一旦幻灯片放映运行一次，我遇到了一个文本被消除锯齿的问题。 也就是说，如果幻灯片放映中有三个图像，那么这三个图像中的每一个都会第一次出现在文本中，文本会正确呈现。 但是，一旦幻灯片放映循环文本就会变成消除锯齿。

我已经阅读了这篇文章，并浏览了无数博客，了解如何最好地纠正它。 我遇到的最常见的修复方法是在不透明度为100％时删除filter属性，如下所示：

$('#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脚本之后包含此文件。

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

Answer 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");}); 

Answer 3

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

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

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

这对我很有用。 希望这可以帮助像我一样谷歌搜索的其他人。