我知道在直接处理动画时如何使用回调来等待动画完成,但是如果从另一个函数调用动画,那我该怎么办?
例如,我有一个元素#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...
}
答案 0 :(得分:2)
如果页面上只有一个动画,你可以尝试这样的事情:
function foo() {
$('#btn').click();
$(":animated").promise().done(function() {
$('#avatar').fadeIn('slow');
});
}
答案 1 :(得分:2)
您可以使用promise
和done
方法:
$('#btn').trigger('click').promise().done(function(){
$('#avatar').fadeIn('slow');
});
请注意,它仅在您选择当前正在设置动画的元素时才有效。最好的选择是使用animate
回调函数。
$('#elem').animate({}, duration, function(){
// ...
})