jQuery是一个广泛使用的JavaScript库，用于简化HTML文档的遍历和操作、事件处理、动画效果和Ajax等方面的操作。在前端开发中，我们通常会使用jQuery来实现各种动画效果。
但是，在某些情况下，我们需要同时运行多个jQuery动画，例如两个元素同时进行缩放和旋转。如果不加以处理，这些动画可能会相互干扰，导致出现不理想的效果。
本文将介绍如何同时运行两个jQuery动画，并提供示例代码和说明。
解决方案
以下是实现同时运行两个jQuery动画的步骤：
1. 使用$.when()函数
在jQuery中，可以使用$.when()函数来同时启动多个动画。该函数接受任意数量的Deferred对象作为参数，并返回一个新的Deferred对象。只有当所有传入的Deferred对象都已经完成时，新的Deferred对象才被标记为完成。具体语法如下：
---------------- -- --------- -- ---------------------- - -- -------------------------- ---
其中，deferred1、deferred2等表示要等待的Deferred对象，可以是jQuery动画的返回值。
2. 调用动画函数并返回Deferred对象
要使用$.when()函数，必须首先调用jQuery动画函数，并返回一个Deferred对象。可以通过在动画函数后面添加.promise()方法来实现这一点。例如，要同时对两个元素进行缩放和旋转，可以使用以下代码：
--- ---------- - ------------------------ ------ -------- ------- ------- ------------- --- ---------- - ------------------------ ------- ------- -------------
3. 将Deferred对象传递给$.when()函数
一旦已经获得了两个Deferred对象，就可以将它们传递给$.when()函数。
------------------ --------------------------- - -- ---------------- ---
完整示例代码
下面是一个完整的示例代码，演示如何同时运行两个jQuery动画。
--------- -----
------
------
------------------- ---------- ---- --------------
-------
--- -
--------- ---------
---- ----
----- ----
---------- --------------- ------
----------------- -----
-------- -----
-
--------
------- -----------------------------------------------------------
--------
---------------------------- -
--- ---------- - ------------------------------
------ --------
------- -------
-------------
--- ---------- - -----------------------------
------- -------
-------------
------------------ --------------------------- -
---------- ---------- -------------
---
---
---------
-------
------
-----------
-----------
-------
-------在这个示例中，我们创建了两个<div>元素，并将它们同时进行缩放和旋转动画。当所有动画都完成时，会弹出一个提示框。
结论
使用$.when()函数可以轻松地实现同时运行多个jQuery动画的效果。通过从jQuery动画函数返回Deferred对象，并将它们传递给$.when()函数，可以确保所有动画在正确的顺序和时间内运行，从而获得更加准确和流畅的动画效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/9114