jQuery 如何让多个jQuery动画同时运行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13088262/
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 make multiple jQuery animations run at the same time?
提问by Alessandro
As it stands there us a difference between the two and I want them to run at the same time. Here is the code:
就目前而言，我们两者之间存在差异，我希望它们同时运行。这是代码：
$(selector1).animate({
height: '670'
}, 2000, function() {
// Animation complete.
});
$(selector2).animate({
top: '670'
}, 2000, function() {
// Animation complete.
});?
回答by andlrc
Using queue:false. You can see the full docshere.
使用queue:false. 您可以在此处查看完整文档。
$(selector1).animate({
height: '670'
}, {
duration: 2000,
queue: false,
complete: function() { /* Animation complete */ }
});
$(selector2).animate({
top: '670'
}, {
duration: 2000,
queue: false,
complete: function() { /* Animation complete */ }
});
Docs:
文档：
.animate( properties, options )version added: 1.0
propertiesA map of CSS properties that the animation will move toward.
optionsA map of additional options to pass to the method. Supported keys:duration:A string or number determining how long the animation will run.easing:A string indicating which easing function to use for the transition.complete:A function to call once the animation is complete.step:A function to be called after each step of the animation.queue:A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string.specialEasing:A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions (added 1.4).
.animate(properties, options)版本添加：1.0
properties动画将移向的 CSS 属性映射。
options传递给方法的附加选项的映射。支持的键：duration:确定动画将运行多长时间的字符串或数字。easing:一个字符串，指示用于过渡的缓动函数。complete:动画完成后调用的函数。step:在动画的每一步之后调用的函数。queue:一个布尔值，指示是否将动画放入效果队列。如果为 false，动画将立即开始。从 jQuery 1.7 开始， queue 选项也可以接受一个字符串，在这种情况下，动画被添加到由该字符串表示的队列中。specialEasing:由 properties 参数及其相应缓动函数定义的一个或多个 CSS 属性的映射（添加 1.4）。
回答by Milind Anantwar
use queue variable as false...
使用队列变量为假...
$(function () {
$("selector1").animate({
height: '200px'
}, { duration: 2000, queue: false });
$("selector2").animate({
height: '600px'
}, { duration: 2000, 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:
为了确保动画确实同时运行，请使用：
$(function() {
$('selector1').animate({..., queue: 'selector-animation'});
$('selector2').animate({..., queue: 'selector-animation'}).dequeue('selector-animation');
});
Further animations can be added to the 'selector-animation' queue and all can be initiated provided the last animation dequeue's them.
可以将更多动画添加到“选择器动画”队列中，并且所有动画都可以启动，前提是最后一个动画出队。
Cheers, Anthony
干杯，安东尼
回答by juan.facorro
You can create a selector expression that will select both elments, see here for a working example: DEMO.
您可以创建一个选择器表达式来选择两个元素，请参见此处的工作示例：DEMO。
HTML
HTML
<div id="blah">Blah</div>
<div id="bleh">Bleh</div>
<input type="button" id="btn" value="animate" />
?
Javascript
Javascript
function anim() {
$('#blah, #bleh').animate({
height: '670'
}, 2000, function() {
// Animation complete.
});
}
$(function(){
$('#btn').on('click', anim);
});?
