Source: http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/
While using the jquery JavaScript library today at work, I noticed a glitch under ie7. when fading a HTML node with. fadein () and. fadeout () functions in jquery, ie drops the Windows cleartype rendering; which results in very uugly text. this problem appears to be very common, but no one has a nice solution for the problem.
The most common way to solve this problem is by removingfilter
CSS attribute. In normal JavaScript, it wowould look like this:
document.getElementById('node').style.removeAttribute('filter');
And in jquery, it wowould look like this:
$('#node').fadeOut('slow', function() {
this.style.removeAttribute('filter');
});
This means that every single time we want to fade an element, we need to removefilter
Attribute, which makes our code look messy.
A simple, more elegant solution wocould be to wrap. fadein () and. fadeout () functions with a custom function via the plugin interface of jquery. the Code wocould be exactly the same, but instead of directly calling the fade functions, we call the wrapper. like so:
$('#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);
I have been informed by Steve Renault that the US Whitehouse website is using some of the JS plugin ented on this blog post. I wocould just like to say thanks to everyone who contributed in the comments.