jQuery 如何在jquery中同时为两件事设置动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3642385/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to animate two things at the same time in jquery
提问by Mehran
I want to animate 2 things at same time when mouse hovers something.
当鼠标悬停某物时，我想同时为 2 件事设置动画。
for example I want to change background color of box1 with id = "box1" and position of box2 with id="box2" when mouse hovers a div with id="trigger".
例如，当鼠标悬停在 id="trigger" 的 div 时，我想更改 id = "box1" 的 box1 的背景颜色和 id="box2" 的 box2 的位置。
but I don't want them to animate in a queue, i.e. one after another. I want them to start animating at same time and finish at same time!
但我不希望它们按队列动画，即一个接一个。我希望他们同时开始动画并同时完成！
回答by Nick Craver
You can just run them in a row, like this:
您可以连续运行它们，如下所示：
$("#trigger").hover(function() {
$("#box1").stop().animate({ backgroundColor: '#000000' });
$("#box2").stop().animate({ top: "-20px" });
}, function() {
$("#box1").stop().animate({ backgroundColor: '#FFFFFF' }); //set it back
$("#box2").stop().animate({ top: "0px" }); //set it back
});
This uses .hover()to animate one way when hovering, and animate them backwhen leaving. The .stop()is just to prevent animation queue build-up. To animate a color, you'll need either the color plugin, or jQuery UIincluded as well.
这用于.hover()在悬停时以一种方式设置动画，并在离开时设置返回动画。这.stop()只是为了防止动画队列堆积。要为颜色设置动画，您需要包含颜色插件或jQuery UI。
Animations in jquery, .animate(), are implementedusing setInterval()with a 13ms timer, so they'll happen outside the normal flow...doing them like above doesn't wait for the first to finish, they'll run simultaneously.
jQuery的动画，.animate()，实现用setInterval()一个定时器13毫秒，所以他们会正常流程外发生......做他们喜欢上面并没有等到第一个到结束，他们会同时运行。
回答by Amy B
When the first animation starts, the next line of code executes without waiting for the animation to finish.
当第一个动画开始时，下一行代码不等待动画完成就执行。
So to do two things at once:
所以要同时做两件事：
$('#trigger').hover(function()
{
$('#box1').animate({ ... });
$('#box2').animate({ ... });
});
回答by Anpher
Check out jQuery.animate() docs. There is queueproperty:
查看jQuery.animate() 文档。有queue属性：
queue: A Boolean indicating whether to place the animation in the effects queue. Iffalse, the animation will begin immediately.
queue: 一个布尔值，指示是否将动画放入效果队列。如果false，动画将立即开始。
回答by Borgboy
While it's true that consecutive calls to animate will give the appearance they are running at the same time, the underlying truth is they're distinct animations running very close to parallel.
虽然对 animate 的连续调用确实会呈现它们同时运行的外观，但潜在的事实是它们是非常接近并行运行的不同动画。
To insure the animations are indeed running at the same time use:
为了确保动画确实同时运行，请使用：
$('#trigger').hover(function() {
$('#box1').animate({..., queue: 'trigger-hover'});
$('#box2').animate({..., queue: 'trigger-hover'}).dequeue('trigger-hover');
});
Further animations can be added to the 'trigger-hover' queue and all can be initiated provided the last animation dequeue's them.
可以将更多动画添加到“触发-悬停”队列中，并且所有动画都可以启动，前提是最后一个动画出队。
Cheers, Anthony
干杯，安东尼
