Chris Nevill Chris Nevill - 8 months ago 72
Javascript Question

Fade In Ajax Start animation

As per the question I asked here:
Ajax Animation JQuery 1.9.2

I'm using an animation to highlight the AJAX data refresh.
However it's a bit obtrusive when most of the time the refresh takes less than half a second.
I'd like to fade the animation in.

Here's the updated fiddle provided by the previous answer:

So we have the code:

$(document).ajaxStart(function () {
$(document).ajaxStop(function () {

I've tried a number of things such as putting additional paramters into the add class

and putting .fadeIn(500);
in a number of places but it doesn't seem to make any difference.

How can I fade the DIV in?


Use jQuery's delay() and make your .modal element fade in and out.

Here's an updated version of your fiddle:

It amounts to this: $.ajaxStart(function () { $('.modal').delay(500).fadeIn(); }); jQuery will wait for half a second before doing the fade in. In the $.ajaxStop you may need to do stop() to prevent the delayed fadeIn from firing if the request finishes within the delay.

Unfortunately, the delay() cannot be cancelled. So maybe the most robust solution would be to use JavaScript's own setTimeout, which can be cancelled by calling clearTimeout.

So then you'd do this:

var timeOut;

$.ajaxStart(function () {
    timeOut = setTimeout(function () {
    }, 500); // Waits for half a second before fading .modal in

$.ajaxStop(function () {
    clearTimeout(timeOut); // Cancels if request finished < .5 seconds