等待動畫完成

Question

我知道如何使用回調等待動畫直接處理動畫時完成，但如果動畫是從另一個函數調用的，那我該怎麼做呢？

例如，我有一個元素，#btn，當我點擊它的動畫被觸發：

$('#btn').click(function() { 
    //bla bla... 
}); 

然後，我把它叫做另一個函數中使用$('#btn').click();：

function foo() { 
    $('#btn').click(); 
    $('#avatar').fadeIn('slow'); //-->I want this animation to run after #btn has finished, but I don't know how to use a callback for this situation... 
} 

Answer 1

您可以使用promise和done方法：

$('#btn').trigger('click').promise().done(function(){ 
    $('#avatar').fadeIn('slow'); 
}); 

http://jsfiddle.net/FsyBZ/

注意，只有當你選擇，目前是越來越動畫元素的作品。最好的選擇是使用animate回調函數。

$('#elem').animate({}, duration, function(){ 
    // ... 
}) 

Answer 2

你可以嘗試這樣的事情，如果在頁面上只有一個動畫：

function foo() { 
    $('#btn').click(); 
    $(":animated").promise().done(function() { 
     $('#avatar').fadeIn('slow'); 
    }); 
}