等待动画完成

时间:2013-01-01 17:22:00

标签: javascript jquery

我知道在直接处理动画时如何使用回调来等待动画完成,但是如果从另一个函数调用动画,那我该怎么办?

例如,我有一个元素#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...
}

2 个答案:

答案 0 :(得分:2)

如果页面上只有一个动画,你可以尝试这样的事情:

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

答案 1 :(得分:2)

您可以使用promisedone方法:

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

http://jsfiddle.net/FsyBZ/

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

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