jquery - 如何使用 jQuery 按顺序为多个元素设置动画？

Question

我以为这很简单，但我仍然无法让它工作。通过单击一个按钮，我希望发生多个动画 - 一个接一个 - 但现在所有动画都同时发生。这是我的代码 - 有人可以告诉我哪里出错了吗？:

$(".button").click(function(){
  $("#header").animate({top: "-50"}, "slow")
  $("#something").animate({height: "hide"}, "slow")
  $("ul#menu").animate({top: "20", left: "0"}, "slow")
  $(".trigger").animate({height: "show", top: "110", left: "0"}, "slow");
});

Answer 1

队列仅在您对同一元素进行动画处理时才有效。天知道为什么上面的内容被投票通过，但它不起作用。

您将需要使用动画回调。您可以将函数作为最后一个参数传递给 animate 函数，它将在动画完成后被调用。但是，如果您有多个带有回调的嵌套动画，则脚本将变得非常难以阅读。

我建议following该插件重写了 native jQuery 动画函数并允许您指定队列名称。使用相同队列名称添加的所有动画都将按顺序运行，如 here 所示。 .

示例脚本

  $("#1").animate({marginTop: "100px"}, {duration: 100, queue: "global"});
  $("#2").animate({marginTop: "100px"}, {duration: 100, queue: "global"});
  $("#3").animate({marginTop: "100px"}, {duration: 100, queue: "global"});