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

jQuery是一个广泛使用的JavaScript库，用于简化HTML文档的遍历和操作、事件处理、动画效果和Ajax等方面的操作。在前端开发中，我们通常会使用jQuery来实现各种动画效果。

但是，在某些情况下，我们需要同时运行多个jQuery动画，例如两个元素同时进行缩放和旋转。如果不加以处理，这些动画可能会相互干扰，导致出现不理想的效果。

本文将介绍如何同时运行两个jQuery动画，并提供示例代码和说明。

解决方案

以下是实现同时运行两个jQuery动画的步骤：

1. 使用$.when()函数

在jQuery中，可以使用$.when()函数来同时启动多个动画。该函数接受任意数量的Deferred对象作为参数，并返回一个新的Deferred对象。只有当所有传入的Deferred对象都已经完成时，新的Deferred对象才被标记为完成。具体语法如下：

$.when(deferred1 [, deferred2 [, ...]]).done(function() {
  // 当所有deferred对象都已经完成后执行的回调函数
});

其中，deferred1、deferred2等表示要等待的Deferred对象，可以是jQuery动画的返回值。

2. 调用动画函数并返回Deferred对象

要使用$.when()函数，必须首先调用jQuery动画函数，并返回一个Deferred对象。可以通过在动画函数后面添加.promise()方法来实现这一点。例如，要同时对两个元素进行缩放和旋转，可以使用以下代码：

var animation1 = $('.element1').animate({
  width: '100px',
  height: '100px'
}).promise();

var animation2 = $('.element2').animate({
  rotate: '45deg'
}).promise();

3. 将Deferred对象传递给$.when()函数

一旦已经获得了两个Deferred对象，就可以将它们传递给$.when()函数。

$.when(animation1, animation2).done(function() {
  // 当所有动画都完成时执行的回调函数
});

完整示例代码

下面是一个完整的示例代码，演示如何同时运行两个jQuery动画。

-- -------------------- ---- -------
--------- -----
------
------
  ------------------- ---------- ---- --------------
  -------
    --- -
      --------- ---------
      ---- ----
      ----- ----
      ---------- --------------- ------
      ----------------- -----
      -------- -----
    -
  --------
  ------- -----------------------------------------------------------
  --------
    ---------------------------- -
      --- ---------- - ------------------------------
        ------ --------
        ------- -------
      -------------

      --- ---------- - -----------------------------
        ------- -------
      -------------

      ------------------ --------------------------- -
        ---------- ---------- -------------
      ---
    ---
  ---------
-------
------
  -----------
  -----------
-------
-------

在这个示例中，我们创建了两个<div>元素，并将它们同时进行缩放和旋转动画。当所有动画都完成时，会弹出一个提示框。

结论

使用$.when()函数可以轻松地实现同时运行多个jQuery动画的效果。通过从jQuery动画函数返回Deferred对象，并将它们传递给$.when()函数，可以确保所有动画在正确的顺序和时间内运行，从而获得更加准确和流畅的动画效果。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9114