如何同时运行两个jQuery动画？

Question

是否可以同时在两个不同的元素上运行两个动画？我需要Jquery排队动画这个问题的反面。

我需要做这样的事......

$('#first').animate({ width: 200 }, 200);

$('#second').animate({ width: 600 }, 200);

但要同时运行这两个。我唯一能想到的就是setTimeout每个动画使用一次，但我不认为这是最好的解决方案。

Answer 1

如果是单个元素多个属性同时变化，你只需要在第一个参数中，同时传入多个属性就行。var div=$("div");   div.animate({left:'100px',width:'200px'},{speed:"slow"});默认情况下animate会将动画注册到内部的queue队列里依次执行。如果希望多个animate调用同时执行，而不是依次执行，只需要在第二个参数中将queue设置为falsevar div=$("div");   div.animate({left:'100px'},{speed:"slow", queue:false});//不进入队列，立刻执行 div.animate({width:'200px'},{speed:"slow", queue:false});//不进入队列，立刻执行

Answer 2

就在这里！$(function () {    $("#first").animate({       width: '200px'    }, { duration: 200, queue: false });    $("#second").animate({       width: '600px'    }, { duration: 200, queue: false });});

Answer 3

这将是同时运行的。如果你想同时在同一个元素上运行两个动画怎么办？$(function () {    $('#first').animate({ width: '200px' }, 200);    $('#first').animate({ marginTop: '50px' }, 200);});这最终排队动画。要同时运行它们，你只能使用一行。$(function () {    $('#first').animate({ width: '200px', marginTop:'50px' }, 200);});有没有其他方法可以同时在同一个元素上运行两个不同的动画？