如何同时运行两个jQueryanimation？

是否有可能同时在两个不同的元素上运行两个animation？ 我需要这个问题与jquery排队animation相反。

我需要做这样的事情…

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

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

Answer 1

就在这里！

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

Answer 2

这将同时运行是的。 如果你想同时在同一个元素上运行两个animation呢？

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

这最终排队animation。 要同时运行它们，你只能使用一行。

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

有没有其他的方式来同时在同一个元素上运行两个不同的animation？

Answer 3

如果按照原样运行，则会显示为同时运行。

以下是一些testing代码：

 <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文档中find了解决scheme：

将所有段落的animation设置为左侧50和不透明1（不透明，可见），在500毫秒内完成animation。 它也会在队列外进行，这意味着它将自动启动而不用等待轮到它 。

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

只需添加： queue: false 。

Answer 5

看到这个辉煌的博客文章关于animation值的对象..你可以使用这些值animation，你喜欢，100％同时！

http://www.josscrowcroft.com/2011/code/jquery-animate-increment-decrement-numeric-text-elements-value/

我用这个来滑入/滑出：

  slide : function(id, prop, from, to) { if (from < to) { // Sliding out var fromvals = { add: from, subtract: 0 }; var tovals = { add: to, subtract: 0 }; } else { // Sliding back in var fromvals = { add: from, subtract: to }; var tovals = { add: from, subtract: from }; } $(fromvals).animate(tovals, { duration: 200, easing: 'swing', // can be anything step: function () { // called on every step // Slide using the entire -ms-grid-columns setting $(id).css(prop, (this.add - this.subtract) + 'px 1.5fr 0.3fr 8fr 3fr 5fr 0.5fr'); } }); } 

Answer 6

虽然连续调用animation会使它们同时运行，但事实上它们是非常接近并行的独特animation。

为了确保animation确实在同一时间运行使用：

 $(function() { $('#first').animate({..., queue: 'my-animation'}); $('#second').animate({..., queue: 'my-animation'}).dequeue('my-animation'); }); 

进一步的animation可以被添加到“我的animation”队列中，并且只要最后一个animation出列它们，所有animation都可以被启动。

干杯，安东尼