Joe Lanman

Affects: IE6, IE7

Description

When using jQuery to fade elements, Internet Explorer will remove anti-aliasing from text (causing it to appear pixelated) .

Workaround

Remove the ‘filter’ attribute used by IE to fade elements once the fade is complete (view the full post to read the code)

Code based on GBegen’s comment on Stack Overflow

http://stackoverflow.com/questions/778208/jquery-fadein-leaves-text-not-anti-aliased-in-ie7

(function($) {
    $.fn.fadeIn = function(speed, callback) {
        return this.animate({opacity: 'show'}, speed, function() {
                if ( $.browser.msie )
                {
                       this.style.removeAttribute('filter');
                }
                if ( $.isFunction(callback) )
                {
		callback.call(this);
                }
        });
    };

    $.fn.fadeOut = function(speed, callback) {
        return this.animate({opacity: 'hide'}, speed, function() {
                if ( $.browser.msie )
                {
                      this.style.removeAttribute('filter');
                }
                if ( $.isFunction(callback) )
                {
		callback.call(this);
                }
        });
    };

    $.fn.fadeTo = function(speed, to, callback) {
        return this.animate({opacity: to}, speed, function() {
                if ( to == 1 && $.browser.msie )
                {
                     this.style.removeAttribute('filter');
                }
                if ( $.isFunction(callback) )
                {
	         callback.call(this);
	     }
        });
    };
})(jQuery);