如何同时运行两个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设置为false

var 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);

});

有没有其他方法可以同时在同一个元素上运行两个不同的动画？