Jquery 在不使用效果的情况下链接效果'；s回调

我知道如何链接两个效果，以便在第一个效果使用回调完成后执行第二个效果。因此

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

因此，这是可行的，div在向上滑动之前先淡出。我希望在一个成功的ajax调用之后进行slideUp，但是在淡出完成之后，但是当我执行以下代码时，ajax请求会很快发生，并且在淡出完成之前会向上滑动

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

在淡出完成后，如何让成功回调中的jQuery执行slideUp

我确实试过这个

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

但它不起作用。

这里有一个粗略的方法：

var done = false;
var todo = null

var amDone = function() {
   if (todo) {
      todo();
   } else {
      done = true;
   }
};

var ifDone = function(f) {
  return function() {
     if (done) {
        f();
     } else {
        todo = f;
     }
  };
};

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

编辑修复允许不同效果

简单解决方案

var flag=false;

$.ajax({
    /** settings **/
    beforeSend: function() {
       $("#target").fadeOut('slow', function() {
           flag=true;
       });
    },
    success: function() {
       var timer = setInterval(function() {
            if (flag) {
                $("#target").slideUp('slow');
                clearInterval(timer);
            }
       }, 500)
    },
    error: function() {
       $("#target").fadeIn('slow');
    }
});

还有一个完整的处理程序（现在称为

.done（）

）、promises或just

.is（“：animated”）

，可以用于这类事情。我发现简单的间隔通常是最简单的解决方案。

我建议使用

---

等待第一次延迟（淡出）和AJAX查询执行一次回调。

使用回调有什么问题？我需要根据AJAX调用的成功情况执行不同的动画。

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');
});