使用jQuery对文本的不透明度进行动画处理时，更正IE Cleartype/Filter问题 [英] Correcting IE Cleartype/Filter Problem when Animating Opacity of Text with jQuery

问题描述

嘿，我遇到了IE的问题，这似乎是一个众所周知的/常见的错误.我有一个在jQuery中建立的图像幻灯片，可以在其他浏览器中完美运行.但是，在IE中，一旦幻灯片放映运行一次，我就遇到了文本被消除锯齿的问题.也就是说，如果幻灯片中有三个图像，则这三个图像中的每个图像第一次与文本一起出现时，文本将正确呈现.但是，一旦幻灯片在文本中循环显示，就将消除锯齿.

Hey all, I'm having an issue with IE that seems like a fairly known/common bug. I have an image slide show I've built out in jQuery that works flawlessly in other browsers. However, in IE I've run into a problem with the text being anti-aliased once the slide show runs one time. Which is to say, if there are three images in the slide show, then the first time each of those three images appear with their text, the text renders properly. However, once the slide show cycles through the text becomes anti-aliased.

我已经阅读了此书，并浏览了无数博客，以了解如何最好地纠正它.我遇到的最常见的解决方法是，一旦不透明度达到100％，就删除滤镜属性，如下所示:

I've read up on this and looked through countless blogs about how to best correct it. The most common fix I've come across is removing the filter attribute once the opacity is at 100% like this:

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

);

这似乎应该可行.但是由于我仍然不是jQuery专家，因此在寻找应该在代码中实现此位置的位置时遇到了麻烦.在我尝试过的所有地方，要么停止幻灯片放映的工作，要么放大幻灯片并使所有图像立即在页面上和下显示.

This seems like it should work. But as I am still no jQuery guru, I'm having trouble finding where I should implement this in my code. Everywhere I have tried, either stops the slide show from working or blows it up and causes all the images to display at once up and down the page.

下面是我使用的代码，非常感谢你们能为我提供的任何帮助，为我指明正确的方向.谢谢！

Below is the code I am using, I would greatly appreciate any help you guys can give me, to point me in the right direction. Thanks!

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

});

推荐答案

更容易做到这一点:

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

这篇关于使用jQuery对文本的不透明度进行动画处理时，更正IE Cleartype/Filter问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！