Correcting IE Cleartype/Filter Problem when Animating Opacity of Text with jQuery

Question

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.

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

);

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

});

Answer 1

Add this to a new js file, say 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();  
    }); 
};

and include this file after the main jquery script in your page.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.fadefix.js"></script>

Fade will now work as expected in IE.

Answer 2

Easier to do this:

$("#sample").fadeIn(1000,function(){this.style.removeAttribute("filter");});

or

$("#sample").fadeOut(1000,function(){this.style.removeAttribute("filter");});

or

$("#sample").show(1000,function(){this.style.removeAttribute("filter");});

or

$("#sample").hide(1000,function(){this.style.removeAttribute("filter");});

Answer 3

Had this same exact problem. I was racking my brain trying to figure out why this solution was working for everyone else, but not me.

The solution I found was to add the "filter" to the animate() function instead. So, using your original function as the starting point:

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

That worked perfectly for me. Hopefully this helps someone else who has been Googling this like me.