IE is losing ClearType if you use jQuery hide or fadeIn

IE is losing ClearType if you use jQuery hide/show or fadeIn/fadeOut or even when you open a remote page.

$('#myDiv').hide();

$("#myDiv").fadeIn('slow');


The problem seems to be that the CSS "filter" attribute is not automatically removed. The most simple solution to this problem would be removing it manually :)


$('#myDiv').fadeIn('slow', function() {
this.style.removeAttribute('filter');
});

But the above solution looks odd because for each hide you need to remove manually.

A simple, more elegant solution would be to wrap the .fadeIn() and .fadeOut() functions with a custom function via the plugin interface of jQuery. The code would be exactly the same, but instead of directly calling the fade functions, we call the wrapper.

$('#node').customFadeOut('slow', function() {
//no more fiddling with attributes here
});

So, how do you get this working? Just include the following code after you include the jQuery library for the added functionality.

(function($) {
$.fn.customFadeIn = function(speed, callback) {
$(this).fadeIn(speed, function() {
if(jQuery.browser.msie)
$(this).get(0).style.removeAttribute('filter');
if(callback != undefined)
callback();
});
};
$.fn.customFadeOut = function(speed, callback) {
$(this).fadeOut(speed, function() {
if(jQuery.browser.msie)
$(this).get(0).style.removeAttribute('filter');
if(callback != undefined)
callback();
});
};
})(jQuery);