gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 21:30:39 24 4
gpt4 key购买 nike

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

$(".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");
});

最佳答案

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

您将需要使用动画回调。您可以将函数作为最后一个参数传递给 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"});

关于jquery - 如何使用 jQuery 按顺序为多个元素设置动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1218152/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com