jquery - 如何让多个jQuery动画同时运行？

Question

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

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

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

Answer 1

使用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 */ }
});

文件：

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

---

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

Answer 2

使用队列变量作为假...

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

Answer 3

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

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

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

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

干杯，安东尼

Answer 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);
});​