Question

I know how to chain two effects so that the second is executed after the first is completed using the callbacks. As so;

$("#target").fadeOut('slow',function(){
   $(this).slideUp('slow');
});

So this works and the div fades out first before it slides up. I want the slideUp to happen after a successful ajax call, but after the fadeOut is finished, but when I do the following code the ajax request happens to quickly and it slidesUp before the fadeOut is finished.

$.ajax({
    /** settings **/
    beforeSend: function() {
       $("#target").fadeOut('slow');
    },
    success: function() {
       $("#target").slideUp('slow');
    },
    error: function() {
       $("#target").fadeIn('slow');
    }
});

How can I tell jQuery in the success callback to perform the slideUp after the fadeOut is done.

I did try this.

 $("#target").queue(function(){
    $(this).slideUp('slow');
 });

But it didn’t work.

Answer 1

I suggest the use of jquery Deferred.

var myDfd = $.Deferred();
$("#target").fadeOut('slow',function(){
   myDfd.resolve();
});

var ajaxDfd = $.ajax({
    /** settings **/
    beforeSend: function() {
       $("#target").fadeOut('slow');
    },
    error: function() {
       $("#target").fadeIn('slow');
    }
});

$.when(ajaxDfd, myDfd).then(function() {
   $("#target").slideUp('slow');
});

You wait for the first Deferred (the fadeOut) and the AJAX query are done to execute one single callback.