Fade In Ajax Start animation
ajax, jquery
Solution
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();
});
Problem
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?