Question

Is there a way to do a global replacement for the fadeIn effect in jQuery to side-step the issue where fading in a transparent png in IE6-IE8 shows a distrortion?

What I mean is, I have something like this at the moment:

$(whichCarousel).find('ul.display li:eq(' + aSpecimen + ')').fadeIn("fast");

Rather than going through each function of mine that uses .fadeIn and doing if/else statements, is there a way in jQuery to globally say:

if ($.browser.msie && $.browser.version.substr(0,1)<9) >> find ".fadeIn" and change to ".show();"` ?

Answer 1

You could override the show() method so that it does the fadeIn() if it’s a compatible browser, or revert to the original show() if it is not. Here’s an example:

<button id="go">Try Me</button>
<div id="test" style="display: none">Your Content</div>

<script type="text/javascript">

(function($, oldMethod) {    
    $.fn.show = function() {
        if ($.browser.msie && $.browser.version.substr(0,1) < 9) {
            oldMethod.apply(this, arguments);   
        } else {
            $(this[0]).css("opacity",0);
            oldMethod.apply(this, arguments);
            $.fn.animate.apply($(this[0]), [{opacity:1}, {duration:1000}]);
        }
    };
})(jQuery, jQuery.fn.show);

$(function() {
    $('#go').click(function() {
        $('#test').show();
    });
});

</script>

You can see a demo with this jsFiddle. I tested in IE9 and Chrome 13 and seemed to work well.

EDIT

I just realized that this is sort of inefficient. It’s checking the browser version on every call to show(). You might be able to do this instead (untested):

(function($, oldMethod) {
    if (!($.browser.msie && $.browser.version.substr(0,1) < 9)) {
        $.fn.show = function() {
            $(this[0]).css("opacity",0);
            oldMethod.apply(this, arguments);
            $.fn.animate.apply($(this[0]), [{opacity:1}, {duration:1000}]);
        };
    }
})(jQuery, jQuery.fn.show);

This is such that the function is only overridden for non-IE browsers under version 9. A jsFiddle example. The original show() function can simply still exist.

Also, the reason for this chunk:

$(this[0]).css("opacity",0);
oldMethod.apply(this, arguments);
$.fn.animate.apply($(this[0]), [{opacity:1}, {duration:1000}]);

Is because fadeIn() calls show() at some point, and we end up with a stack overflow because of the infinite recursion. Calls to .animate({opacity:"show"}) also callshow()`, so that didn’t work either. I dug through the jQuery code to pull out the important bits to recreate the effect without causing a stack overflow.