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

Question

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

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

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

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

Answer 1

就在这里!

$(function () {
    $("#first").animate({
       width: '200px'
    }, { duration: 200, queue: false });

    $("#second").animate({
       width: '600px'
    }, { duration: 200, queue: false });
});

Answer 2

这将是同时运行的.如果你想同时在同一个元素上运行两个动画怎么办？

$(function () {
    $('#first').animate({ width: '200px' }, 200);
    $('#first').animate({ marginTop: '50px' }, 200);
});

这最终排队动画.要同时运行它们,你只能使用一行.

$(function () {
    $('#first').animate({ width: '200px', marginTop:'50px' }, 200);
});

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

Answer 3

如果按原样运行上述内容,它们似乎会同时运行.

这是一些测试代码:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(function () {
    $('#first').animate({ width: 200 }, 200);
    $('#second').animate({ width: 600 }, 200);
});
</script>
<div id="first" style="border:1px solid black; height:50px; width:50px"></div>
<div id="second" style="border:1px solid black; height:50px; width:50px"></div>

Answer 4

我相信我在jQuery文档中找到了解决方案:

将所有段落动画为左侧样式50且不透明度为1(不透明,可见),在500毫秒内完成动画.它也将在队列外执行,这意味着它将自动启动而无需等待轮到它.

$( "p" ).animate({
  left: "50px", opacity: 1
}, { duration: 500, queue: false }); 

只需添加:queue: false.