如何同时运行两个jQuery动画？

Question

是否可以同时在两个不同的元素上运行两个动画？我需要与这个问题的相反情况类似，JQuery队列动画的相反。

我需要像这样做......

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

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

- Jakub Arnold

---

嗯...你试过了吗？如果你使用你那里的确切代码，根据我对animate()工作原理的理解，它们应该同时运行。 - chaos

这里我们来了 - http://jsbin.com/axata。添加 /edit 以查看代码。 - Russ Cam

我在为不同的CSS属性添加动画时遇到了真正的问题。这个问题看起来有点老了，我把它放在JSFiddle上，似乎两种方法都可以工作。这还有意义吗？http://jsfiddle.net/AVsFe/ - valk

在当前版本的jQuery中，我相信自jQuery 1.4以来，以上代码会同时执行动画效果，因为fx队列附加在调用.animate()方法的元素上，而不是全局队列。 - Chris Moschini

上面的 jsbin 已经失效了。同样的代码可以在这个 jsfiddle 上运行：http://jsfiddle.net/b9chris/a8pwbhx1/ - Chris Moschini

Answer 1

有的！

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

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

- Joshua

---

谢谢，我不知道那个“queue”变量！ - dotty

我可以帮忙翻译。将函数传递给jQuery有什么目的？ - pilau

当文档就绪时，它将被执行。这是 $(document).ready(function(){}); 的简写形式，并使您能够在元素定义之前放置您的 JavaScript 代码。 - Raphael Michel

是的，您可以将队列设置为true/false，或者给它一个字符串（队列名称），这样两个动画就可以使用相同的计时器... - AlexK

你如何为这个添加一个onComplete呢？ - jmchauv

Answer 2

可以同时运行，是的。 如果您想要在同一元素上同时运行两个动画，该怎么办？

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

这将导致动画排队播放。 如果要同时运行它们，您只需使用一行。

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

有没有其他方法可以同时在同一个元素上运行两个不同的动画？

- Waseem

Answer 3

我相信我在jQuery文档中找到了解决方案：

将所有段落动画化为左侧样式为50，不透明度为1（不透明，可见），并在500毫秒内完成动画。 它还将在队列之外执行，这意味着它将自动开始而不必等待轮到它。

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

只需简单添加：queue: false。

- user697709

---

如何在该函数中集成完整的功能？ :s - Brainfeeder

Answer 4

如果按照上述方式运行，它们将看起来同时运行。

以下是一些测试代码：

<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>

- Andreas Grech

Answer 5

虽然连续调用animate会给人以它们同时运行的假象，但实际上它们是非常接近并行运行的不同动画。

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

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

更多的动画可以添加到“my-animation”队列中，只要最后一个动画将它们出列即可启动所有动画。

谢谢， 安东尼

- Borgboy

---

如果您还需要在一组其他动画完成后触发动画，那么这里有一个依赖于承诺的答案，可能也会有所帮助：https://dev59.com/RZPfa4cB1Zd3GeqPFqPq#35141159 - GuyPaddock

另外，@Borgboy，你的答案对我没用。根据 https://dev59.com/T3M_5IYBdhLWcg3wzmrL#1218485，每个对象的动画队列都是不同的。你必须排队所有的动画，然后进行一个新的 jQuery 查询，包括所有已排队动画的元素，这样你就可以在结果上调用 dequeue，使它们同时开始。换句话说，$('#first, #second').dequeue()。 - GuyPaddock

@GuyPaddock - 是的，你说得对。我需要相应地更新我的答案。看起来这个变化发生在jQuery 3.3.1或之后。 - Borgboy

Answer 6

请查看这篇关于在对象中动画化值的精彩博客文章。您可以使用这些值同时以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');
                }
            });
        }

- Erik Schoel

---

链接失效，可在https://web.archive.org/web/20150101065437/http://www.josscrowcroft.com/2011/code/jquery-animate-increment-decrement-numeric-text-elements-value#找到它。 - PhiLho

Answer 7

发布我的答案来帮助某人，最高评分的答案没有解决我的疑虑。

当我实施以下操作[来自顶部答案]时，我的垂直滚动动画只是来回抖动：

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

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

我参考了W3 Schools Set Interval，它解决了我的问题，即“语法”部分：

setInterval(function, milliseconds, param1, param2, ...)

我的参数形式为{ duration: 200, queue: false }，强制持续时间为零，只查看参数以获取指导。

长话短说，这是我的代码，如果你想了解它为什么有效，请阅读链接或分析预期的间隔参数：

var $scrollDiv = '#mytestdiv';
var $scrollSpeed = 1000;
var $interval = 800;

function configureRepeats() {
   window.setInterval(function () {
       autoScroll($scrollDiv, $scrollSpeed);
   }, $interval, { queue: false });
};

'autoScroll' 是什么：

    $($scrollDiv).animate({
        scrollTop: $($scrollDiv).get(0).scrollHeight
    }, { duration: $scrollSpeed });

    //Scroll to top immediately 
    $($scrollDiv).animate({
        scrollTop: 0
    }, 0);

编程愉快！

- EGC