如何等待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

});