How can I delay an ajax call in jQuery?

Question

Is there a way to delay an ajax request from executing until an animation finished?

var showAjaxLoader = function(selector) {
    $("." + selector).fadeToggle("slow");
    $("." + selector).parent().html('<img src="ajax-loader.gif" />').fadeIn();
};

$(".add, .delete")
    .bind("ajax:beforeSend", function(event, data, status, xhr) {
        showAjaxLoader(this.className);
});

Basically, the response of the request will replace the lay contents, but I don't want this to happen until the effect took place. Otherwise the image will just pop up with no effect...

Answer 1

U can use a callback methode for when the animation is finished:

$("p").fadeToggle("slow", function () {
   $("div").append("<div>finished animation</div>");
   // Here you can put your ajax request
});

Answer 2

Just use callback, as in the .fadeToggle() , .fadeIn() and .fadeOut() documentation. Make AJAX call within this callback.

And I believe you do not want to make request even when fading out that box (at least I don't see the reason here), but only when fading in.