2

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

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

所以这很有效，并且 div 在它向上滑动之前先淡出。我希望在成功的 ajax 调用之后发生 slideUp，但是在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');
 });

但它没有用。

4

3 回答 3

3

简单的解决方案！

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')，可用于此类事情。我发现一个简单的区间通常是最简单的解决方案。

于 2012-07-16T17:36:37.737 回答
1

这是一个粗略的方法：

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

编辑固定以允许不同的效果

于 2012-07-16T17:35:46.950 回答
1

我建议使用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 查询完成以执行一个回调。

于 2012-07-16T17:41:21.737 回答