Sampsonvideos Blog

Many of you who use jQuery regularly may have noticed that using .fadeIn(), .fadeOut(), or .fadeTo() will remove cleartype from your opacified-text. This sucks, as you would guess. To my knowledge this is an IE-exclusive “feature”.

After doing a small bit of searching, I discovered the solution over on Benjamin Novakovic’s blog. In his example he uses fadeIn, and fadeOut, but these functions both have a similar footprint to fadeTo - [callback].

Essentially it’s this, you remove the filter from the affected region. If you’re fading .opacity, then remove the css filter property after you’re finished. This doesn’t remove all woes, unfortunately. You still get a nasty transition where for a moment your cleartype is gone, and returns only when the fading is completed.

Ben provided the following replacement functions. After some quick testing, they seem to be pretty solid.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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

Jonathan Javascript, Programming, jQuery