Fade In Ajax Start animation

Question

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: DEMO

So we have the code:

$(document).ajaxStart(function () {
    $("body").addClass("loading");
});
$(document).ajaxStop(function () {
    $("body").removeClass("loading");
});

I've tried a number of things such as putting additional paramters into the add class addClass("loading",500) addClass("loading",500,500)

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?

See http://stackoverflow.com/questions/1248542/jquery-animate-with-css-class-only-without-explicit-styles — noj, Mar 28 '13 at 09:38

Knelis · Accepted Answer · 2013-03-28T09:47:17.037

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

Here's an updated version of your fiddle: http://jsfiddle.net/gk3RL/1/.

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 () {
        $('.modal').fadeIn();
    }, 500); // Waits for half a second before fading .modal in
});

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

Good call on the cleared timeout. That works perfectly thanks — Chris Nevill, Mar 28 '13 at 10:02

score 1 · Answer 2 · answered Mar 28 '13 at 09:43

You need to actually fade the modal in.

CSS:

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
 .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, .8) url('http://sampsonresume.com/labs/pIkfp.gif') 50% 50% no-repeat;
}
/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
 body.loading {
    overflow: hidden;
}

Javascript:

$(document).ajaxStart(function () {
    $("body").addClass("loading");
    $('.modal').fadeIn(500);
});
$(document).ajaxStop(function () {
    $("body").removeClass("loading");
    $('.modal').fadeOut(500);
});

// Initiates an AJAX request on click
$(document).on("click", function () {
    $.post("/mockjax");
});


// http://code.appendto.com/plugins/jquery-mockjax
$.mockjax({
    url: '/mockjax',
    responseTime: 2000
});

Here's the fiddle.

score 0 · Answer 3 · answered Jun 14 '16 at 14:16

You can do it this way:

function startAjaxLoader() {
    $("#ajaxLoader").delay(500).fadeIn(750);
}

function stopAjaxLoader() {
    $("#ajaxLoader").stop(true).hide();
}

$(document).ajaxStart(function() {
    startAjaxLoader();
}).ajaxComplete(function() {
    stopAjaxLoader();
}).ajaxError(function(ajaxErrorEvent, jqXHR) {
    stopAjaxLoader();
    // Display error
});

The method .stop(true) cancels all events and animations running or queued.

Fade In Ajax Start animation

3 Answers3