hide() fails while fadein is in progress

[[email protected]…]

I have a simple div with a loading gif, which is normally hidden. If I click a couple of controls on the page really quickly, which both fire ajax events, the loading div is never hidden. This happens in firefox, but not IE 9.

My jQuery code is below.

jQuery(document).ready(function ()
    {
        loadingDiv = jQuery("div#loading");
        loadingDiv.hide();
        loadingDiv.ajaxStart(function ()
        {
            orosLog('oros - begin ajaxStart ' + new Date().getTime());
            jQuery(this).center();  // custom center function.
            jQuery(this).fadeIn('slow', function () {
                orosLog('oros - fadein complete ' + new Date().getTime());
            });
            orosLog('oros - end ajaxStart ' + new Date().getTime());
        });
        loadingDiv.ajaxStop(function ()
        {
            orosLog('oros - begin ajaxStop ' + new Date().getTime());
            jQuery(this).hide();
            orosLog('oros - end ajaxStop ' + new Date().getTime());
        })
    }
);

Here is the sequence of logs in the firebug console. As you can see, the fadein complete is AFTER the ajaxStop event is complete. In other words, the hide was called, but the hide was not successful, because the fadein was not complete. If I change the fadein to a simple show(), it works just fine.

oros - begin ajaxStart 1344619450729
oros - end ajaxStart 1344619450749
oros - begin ajaxStop 1344619450812
oros - end ajaxStop 1344619450816
oros - fadein complete 1344619451076
oros - fadein complete 1344619451678

[dmethvin]

This isn't a bug. You'd need to .stop() the animation and .fadeOut or whatever. Please ask for help on the forum.