Javascript 等待动画完成

当我直接处理动画时，我知道如何使用回调来等待动画完成，但是如果动画是从另一个函数调用的，那么我该如何做呢

例如，我有一个元素，

#btn

，当我单击它时会触发一个动画：

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

然后我使用

$（'#btn'）调用它在另一个函数中：

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...
}

如果此时页面上只有一个动画，您可以尝试以下操作：

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

如果此时页面上只有一个动画，您可以尝试以下操作：

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

您可以使用
promise
和
done
方法：

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


请注意，它仅在选择当前正在设置动画的元素时才起作用。最好的选择是使用
animate
回调函数

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

您可以使用
promise
和
done
方法：

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


请注意，它仅在选择当前正在设置动画的元素时才起作用。最好的选择是使用
animate
回调函数

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