jquery fadeIn/fadeOut ie cleartype glitch

Question

I´m currently trying to add the feature that is discussed here: http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/

A glitch in IE7 when fading with the .fadeIn() and .fadeOut() in jQuery, IE drops the windows Cleartype rendering; which results in very ugly text.

Am I understanding it correctly if I say that I could replace:

.fadeIn()

with

.customFadeIn('slow', function(customFades) {})

? assuming I have function customFades()

Answer 1

after some fix'n and trix'n... works now :)

    function customFades() {
    (function($) {
        $.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(); 
            });
        };

        $.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);
}

Answer 2

Replace it with

.customFadeIn('slow')

In your example. The second parameter is still an optional callback. If you don't need the callback, you can just use the single-parameter version.

If you have a callback to use:

.customFadeIn('slow', myCallback) // assumes function myCallback() exists

The point of this customFadeIn stuff is just to keep you from having to remove the filter every time you use a fade.

Answer 3

http://www.kevinleary.net/jquery-fadein-fadeout-problems-in-internet-explorer/