Font cleartype problems with fadeIn() and fadeOut() in Internet Explorer 7 (IE7)

Have you ever noticed whenever you use jQuery's fadeIn() and fadeOut() functions your text will become edgy. Mozilla and other seem to be rendering fine (not sure about IE6). Anyway, to solve this problem you need to remove the filter attribute from the DOM element that you have faded in/out.

For example:

// This causes this text glich
$("#message").fadeIn();

// This will fix it
document.getElementById("#message").style.removeAttribute("filter");

Screenshots:

You need to remove the filter attribute after fadeIn() function has completed its job. In other words, as a function callback. Otherwise, fadeIn()/fadeOut() functions would change the opacity of the element, which in turn would cause the filter attribute to be attached yet again. So, remove the attribute in function callback like this:

$('#message').fadeIn(function(){
    this.style.removeAttribute("filter");
});