javascript - 等待动画完成

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(){
   // ...
})