jQuery具有不同持续时间的多个动画，但同时运行

Question

我如何拥有2个或更多不同持续时间但同时开始的动画

当我做某事时（例如）

$("#something").animate({opacity: 1}, 2500).animate({left: 1000}, 10000);

#something仅在不透明度动画完成后才开始移动

Answer 1

jquery文档解释了如何执行此操作：http://docs.jquery.com/Release:jQuery_1.2/Effects#Simultaneous_Animations

我认为这会解决问题，尽管你可能只需要一个动画的队列：false属性。

$("#something")
    .animate({opacity: 1}, {queue: false, duration: 2500})
    .animate({left: 1000}, {queue: false, duration: 10000});

Answer 2

根据Api Docs，您可以设置名为queue=false的属性以获得所需的效果。所以要修改代码：

$("#something")
.animate({opacity: 1, queue: false}, 2500)
.animate({left: 1000 +"px", queue: false}, 10000);

我希望这可以解决问题：）

PS。其中一个动画不应该具有queue=false属性，因此您可以将其他动画链接到该对象。在这种情况下，您可能不会跳过最后一个动画上的queue=false，因此链接动画仅在最长动画结束后才开始。例如，如果您还想在当前动画后设置高度动画：

$("#something")
.animate({opacity: 1, queue: false}, 2500)
.animate({left: 1000 +"px"}, 10000)
.animate({height: 500 +"px"}, 1000);

这样height只会在left动画结束后制作动画。

Answer 3

抱歉误读了你的问题

$("#something").animate({opacity: 1,left:1000}, 2500)