如何让多个jQuery动画同时运行？答案

【问题标题】：How to make multiple jQuery animations run at the same time?如何让多个jQuery动画同时运行？
【发布时间】：2012-10-16 19:09:04
【问题描述】：

就目前而言，我们两者之间存在差异，我希望它们同时运行。代码如下：

$(selector1).animate({
    height: '670'
}, 2000, function() {
    // Animation complete.  
});

$(selector2).animate({
    top: '670'
}, 2000, function() {
    // Animation complete.
});

【问题讨论】：

第一个与第二个重叠
嵌套动画...一个进入另一个

标签： jquery jquery-animate

【解决方案1】：

使用queue:false。您可以在此处查看完整的docs。

$(selector1).animate({
    height: '670'
}, {
    duration: 2000,
    queue: false,
    complete: function() { /* Animation complete */ }
});

$(selector2).animate({
    top: '670'
}, {
    duration: 2000,
    queue: false,
    complete: function() { /* Animation complete */ }
});

文档：

.animate(properties, options) 添加的版本：1.0

properties 动画将朝其移动的 CSS 属性映射。
options 要传递给方法的附加选项映射。支持的键：
duration: 确定动画将运行多长时间的字符串或数字。
easing: 指示用于过渡的缓动函数的字符串。
complete: 调用一次的函数动画完成。
step: 动画每一步后调用的函数。
queue: 一个布尔值，指示是否将动画放入效果队列。如果为 false，动画将立即开始。从 jQuery 1.7 开始，queue 选项也可以接受字符串，在这种情况下，动画将添加到由该字符串表示的队列中。
specialEasing: 由 properties 参数定义的一个或多个 CSS 属性的映射及其相应的缓动函数（添加 1.4）。

【讨论】：

对您来说可能很简单/清楚，但每个人都有不同的专业领域。复制大量文档（其中大部分与此答案无关）并不是那么有用，因为您还没有真正解释 queue 的作用。没有任何迹象表明 OP 尚未阅读文档并且仍想提出问题。
@andyb Andy 我明白你说的。我认为这个问题是关于如何防止动画被链接/排队的解决方案，文档介绍部分说：if false, the animation will begin immediately.我可以看到这如何变得更清楚了。
我的意思是您答案中文档块中的其他选项与此答案无关，例如 easing 和 step 选项不相关。我还评论说你的开场白的语气似乎有点刺耳 - 答案可能对你很清楚对你但对其他人可能不是很清楚，尤其是 OP
@andyb 你说得对，我的开场白似乎有点刺耳。但我的意思很明确：如此严格的问题，如此优雅的简单易懂的问题可能（或可能不会）可以在文档页面上找到。

【解决方案2】：

使用队列变量为假...

$(function () {
    $("selector1").animate({
     height: '200px'
   }, { duration: 2000, queue: false });
    $("selector2").animate({
     height: '600px'
   }, { duration: 2000, queue: false });
});

【讨论】：

【解决方案3】：

虽然连续调用 animate 确实会显示它们同时运行的外观，但基本事实是它们是非常接近并行运行的不同动画。

为了确保动画确实同时运行，请使用：

$(function() {
    $('selector1').animate({..., queue: 'selector-animation'});
    $('selector2').animate({..., queue: 'selector-animation'}).dequeue('selector-animation');
});

可以将更多动画添加到“选择器动画”队列中，并且所有动画都可以在最后一个动画出列时启动。

干杯，安东尼

【讨论】：

【解决方案4】：

您可以创建一个选择器表达式来选择两个元素，请参见此处的工作示例：DEMO。

HTML

<div id="blah">Blah</div>
<div id="bleh">Bleh</div>
<input type="button" id="btn" value="animate" />

Javascript

function anim() {
    $('#blah, #bleh').animate({
        height: '670'
    }, 2000, function() {
        // Animation complete.  
    });
}
$(function(){
    $('#btn').on('click', anim);
});

【讨论】：