如何在 jquery 中链接多组动画？答案

【问题标题】：How to chain multiple group of animations in jquery?如何在 jquery 中链接多组动画？
【发布时间】：2012-07-30 15:29:32
【问题描述】：

假设我有几个函数可以做一些动画和其他一些事情：

function animations1() {
    $('some_object').animation();
    ...
}

function animations2() {
    $('some_object').animation();
    ...
}

function animations3() {
    $('some_object').animation();
    ...
}

链接这些功能的最佳方式是什么，例如当animations1完成时调用animations2，当animations2完成时调用animations3？

【问题讨论】：

如果您只是立即调用所有三个函数，jQuery 的效果队列将确保动画按顺序执行（而不是一次全部执行）。
@amnotiam，不是真的，jQuery 会尝试“同时”为它们设置动画
@Adnan：如果使用问题中显示的相同选择器，则不会。
@amnotiam，是的。没错，没有注意到他们使用相同的选择器。谢谢
它们如何按顺序而不是并行运行的示例：jsfiddle.net/j08691/sf4bK

标签： javascript jquery

【解决方案1】：

可以使用animate方法的回调函数：

$('some_object').animate({..}, 100, function(){
   $('another_object').animate({..}, 100)
})

或：

function animations1() {
     $('some_object').animate({..}, 100, function(){
       animations2() 
     })
}

function animations2() {
     $('another_object').animate({..}, 100, function(){
       animations3() 
     })
}

function animations3() {
    $('some_object').animation();
    ...
}

【讨论】：

“假设我有几个功能......”
通过您的编辑，您假设始终需要相同的序列。我猜他们在不同的功能中是有原因的。
@amnotiam，虽然你的观点完全正确，但 OP 并没有把他的案子说得很清楚。
@Adnan：你是对的。实际情况完全不清楚。
@Raminson：仅供参考，这会更简洁一些...$('another_object').animate({..}, 100, animations3)