Question

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

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

所以这有效，div在它向上滑动之前先消失。我希望slideUp在成功的ajax调用之后发生，但在之后fadeOut完成，但是当我执行以下代码时，ajax请求很快发生并且在fadeOut完成之前它会滑动。

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

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

我确实试过了。

 $("#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')，可以用于此类事情。我发现简单的间隔通常是最简单的解决方案。

Answer 2

这是一种粗暴的方式：

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

已修复

编辑以允许不同的效果

Answer 3

我建议使用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');
});

等待第一个Deferred（fadeOut）和AJAX查询完成一个回调。

在不使用效果回调的情况下链接效果

3 个答案: