如何等待jQuery效果完成？

Question

我怎样才能等到动画在jQuery中完成？

function foo() {
  $("#element").fadeOut();
}

我需要.fadeOut()在foo()返回之前完成，因为调用代码期望DOM不含#element 。

Answer 1

所有jQuery动画函数都有complete回调。 因为它们是异步的，所以您不能等待它们，因此必须使用回调。

function foo() {
    $("#element").fadeOut(function() {
        // finished
    });
}

Answer 2

jQuery将淡出定义为： .fadeOut( [duration ] [, complete ] ) ，因此使用回调应该可以正常工作。

complete类型：Function（）动画完成后调用的函数，每个匹配的元素调用一次。

Answer 3

为此使用回调函数

function foo() {
  $("#element").fadeOut('slow', function(){
     // called when the element finishes fading out
  });
}

Answer 4

您无法阻止foo在动画结束之前返回。 您需要使用回调或promise / deferred模式。 这是回调的工作方式：

function bar() {
    foo(function() {
        // stuff to execute after foo()
    });
}

function foo(callback) {
    $("#element").fadeOut('speed', callback);
}

Answer 5

$('#element').fadeOut(1000, function() {
  // after 1 second do something

});