jquery - 链接效果而不使用效果的回调

Question

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

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

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

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

如何在成功回调中告诉 jQuery 在 fadeOut 完成后执行 slipUp。

我确实尝试过这个。

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

但是没有成功。

Answer 1

简单的解决方案!

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 或只是 .is(':animated')，可用于此目的那类的东西。我发现简单的区间通常是最简单的解决方案。