核心要点
animate() 方法是一个多功能工具，允许开发者通过在指定持续时间内逐步改变元素的 CSS 属性来创建自定义动画。animate() 方法仅适用于数值型 CSS 属性，不适用于极其复杂的动画，因为可能会出现性能问题。animate(properties[, duration][, easing][, callback]) 和 animate(properties[, options])，大多数参数都是可选的。这些参数控制动画的各个方面，例如持续时间、缓动函数以及动画完成后发生的情况。animate() 方法链接在一起创建更复杂的动画，允许按照调用的顺序执行动画序列。此功能称为“排队”，增强了 jQuery 动画的功能和灵活性。jQuery 是一个优秀的库，多年来它改变了数千名开发者处理项目的方式。在创建 jQuery 时，CSS 无法创建复杂的动画，只能使用 JavaScript。由于创建了几个用于此目的的方法，jQuery 在动画方面提供了很大帮助。尽管它带有一些简单的动画（fadeIn()、hide()、slideDown() 等），为了保持其轻量级，该库提供了一个非常灵活的方法 animate()，允许我们创建任何我们想要的动画。本文的主题就是此方法。jQuery 的 animate() 是一个包装器方法，这意味着它操作的是一组先前选择的 DOM 元素，这些元素由 jQuery 包装。此方法允许您将您自己的自定义动画效果应用于集合中的元素。为此，我们必须提供一组 CSS 样式属性和值，这些属性将在动画结束时达到。动画效果期间样式达到的中间值（由动画引擎自动处理）由效果持续时间和缓动函数决定，这两个选项我们很快就会讨论。可以进行动画处理的 CSS 样式属性列表仅限于接受数值的那些属性。该值可以是绝对值（例如 200），也可以是从起始点的相对值。对于绝对值，jQuery 假设像素为默认单位。我们还可以指定其他单位，例如 em、rem 或百分比。要指定相对值，我们必须在前面加上 = 或 -= 来分别指示正或负方向上的相对目标值。现在我们对 animate() 有了一些了解，是时候看看它的签名及其参数了。
签名和参数
此方法主要有两种形式，其大多数参数都是可选的（使用通常的方括号表示）：
animate(properties[, duration][, easing][, callback])animate(properties[, options])关于参数，还有很多要说的：
properties (对象)：一个哈希表，其中包含动画结束时应达到的值。duration (数字|字符串)：效果持续时间（以毫秒为单位）或预定义字符串之一：“slow”（600 毫秒）、“normal”（400 毫秒）或“fast”（200 毫秒）。默认为“normal”。easing (字符串)：执行转换时要使用的缓动函数名称。默认值为“swing”。callback (函数)：一个函数，在为每个动画元素完成动画时执行。options (对象)：一个哈希表，其中包含要传递给该方法的一组选项。可用的选项如下：always (函数)：动画完成或停止而未完成时调用的函数。complete (函数)：动画完成后执行的函数。done (函数)：动画完成后调用的函数。duration (字符串|数字)：与前面描述的相同。easing (字符串)：与前面描述的相同。fail (函数)：动画失败时执行的函数。progress (函数)：在动画的每个步骤之后运行的函数。此函数每个动画元素仅调用一次。queue (布尔值)：如果动画必须放在效果队列中（稍后会详细介绍）。默认值为 true。specialEasing (对象)：一个或多个 CSS 属性的哈希表，其值为缓动函数。start (函数)：动画开始时执行的函数。step (函数)：一个函数，用于调用每个动画元素的每个动画属性。术语缓动用于描述处理和动画帧速度的方式。当 queue 选项设置为 true 时，允许我们按顺序运行动画，当设置为 false 时，允许并行运行动画。这给了我们很大的权力，我们可以随意使用。在本文的其余部分，我们将演示一些这些参数的实际应用，让您体验一下 animate() 的可能性。
示例用法
在本节中，我们将构建一些演示来发挥 animate() 的强大功能。请记住，由于与动画的性能和流畅性有关的问题，此方法不适合非常非常复杂的动画。
运行单个动画非常容易，只需调用一次该方法即可。例如，我们可能希望将元素从框的一侧移动到另一侧。为了说明此动画，我们将设置两个 div 元素，一个在另一个内部。我们将对它们进行样式设置，以便内部 div 具有红色背景。完成此操作的代码如下所示。HTML：
<div class="rectangle"> <div class="square-small"></div> </div>
CSS：
.rectangle {
width: 300px;
height: 20px;
display: block;
position: relative;
border: 1px solid black;
margin: 20px 0;
}
.square-small {
display: block;
width: 20px;
height: 20px;
position: absolute;
background-color: red;
}使用 animate() 的强大功能，我们将小型方块从一侧移动到另一侧：
$('.rectangle')
.find('.square-small')
.animate({
left: 280
}, 'slow');在此代码中，我们指定 left 属性是唯一要进行动画处理的属性。我们将动画持续时间设置为预设值 slow（600 毫秒）。我们使用绝对值移动内部 <div>（具有类 .square-small）。该值基于我们使用前面列出的 CSS 代码设置的容器宽度。此解决方案不是很灵活，因为如果我们更改容器的宽度，内部 <div> 将无法到达另一侧（如果我们在容器上设置更宽的宽度），或者将超过它（如果我们设置更窄的宽度）。一种解决方案是根据外部和内部 <div> 的当前宽度的计算来设置 left 属性的值，如下所示：
left: $('.rectangle').width() - $('.rectangle').find('.square-small').width()在一个元素或一组元素上执行多个动画就像链接对 animate() 的调用一样容易。在此示例中，我们将移动一个小方块，因为它沿着大方形内部沙漏的周长移动（而不是矩形）。为了构建此演示，我们将使用以下标记：
<div class="square-big"> <div class="square-small"></div> </div>
对于样式，我们需要使用前面用于 .square-small 的相同 CSS，以及以下样式来设置最外层正方形的样式：
.square-big {
width: 300px;
height: 300px;
display: block;
position: relative;
border: 1px solid black;
margin: 20px 0;
}最后一步是编写 JavaScript 代码来绘制构成理想沙漏周长的四条线。从最外层正方形的左上角开始，我们必须对小型方块进行动画处理，直到它到达大正方形的右下角。小型方块必须沿对角线移动才能产生效果。一旦它到达右下角，我们就必须将其移动到左下角。然后，它必须到达右上角，最后回到其原始位置。在介绍此演示时，我们说我们想要执行无限动画。因此，我们必须找到一种方法来再次运行整个动画，一旦完成最后一步。为此，我们可以将对四个链接的 animate() 调用的调用包装在一个函数中，这样我们就有了一个要引用的函数。然后，我们可以使用前面提到的 complete 回调和 IIFE 在完成最后一步时再次运行动画。将此描述转换为代码的结果如下：
(function animation() {
var options = {
duration: 800,
easing: 'linear'
};
$('.square-big')
.find('.square-small')
.animate({
left: 280,
top: 280
}, options)
.animate({
left: 0
}, options)
.animate({
left: 280,
top: 0
}, options)
.animate({
left: 0
}, $.extend(true, {}, options, {
complete: function() {
animation();
}
}));
})();在上面的代码中，请注意我们如何使用 options 变量，这样我们不必在调用 animate() 时一遍又一遍地编写相同的参数。此外，因为我们最后一次使用 options 时必须添加 complete 回调，所以我们使用了 jQuery 的 extend() 方法。
作为我们的最后一个示例，我们将设置 options 参数（第二种形式的第二个参数）的 start、complete 和 progress 属性。目的是在动画运行时禁用单击时运行动画的按钮。之后，我们想显示动画完成百分比。对于此示例，我们将修改我们构建的第一个演示。根据描述，我们必须添加一个按钮和一个元素（我们将使用一个 span）来显示百分比。此更改导致以下标记：
<div class="rectangle"> <div class="square-small"></div> </div>
我们不必添加更多样式，因此我们可以跳到 JavaScript 代码的讨论。为了仅在单击按钮时运行动画，我们必须向按钮的单击事件添加一个处理程序。在处理程序内部，我们使用 jQuery 的 prop() 方法根据动画是否正在运行或完成来禁用和启用按钮。最后，我们使用传递给附加到 progress 选项的处理程序的第二个参数来显示动画完成百分比。生成的代码如下所示：
.rectangle {
width: 300px;
height: 20px;
display: block;
position: relative;
border: 1px solid black;
margin: 20px 0;
}
.square-small {
display: block;
width: 20px;
height: 20px;
position: absolute;
background-color: red;
}结论
本文讨论了使用 jQuery 的 animate() 方法可以做什么。我们介绍了它的签名及其接受的参数。在本文中，我们探讨了三个示例动画。本文仅简要介绍了 animate() 的可能性。事实上，只要有一点耐心和创造力，我们就可以创建真正复杂而精美的动画。
关于 jQuery Animate 方法的常见问题 (FAQ)
jQuery animate 方法是一个强大的工具，允许您创建自定义动画。它的工作原理是逐步更改元素的 CSS 属性，持续时间由您指定。您可以对任何 CSS 属性进行动画处理，但必须使用驼峰式大小写指定属性，例如 marginLeft 而不是 margin-left。animate 方法还允许您指定缓动函数，这些函数控制动画的速度，以及在动画完成后执行的回调函数。
jQuery 提供了 stop() 方法来停止动画。此方法会停止选定元素上当前正在运行的动画。如果您想暂停动画，则会稍微复杂一些，因为 jQuery 没有为此提供内置方法。但是，您可以通过使用插件或手动控制动画进度来实现它。
是的，您可以使用 jQuery animate 方法一次动画处理多个 CSS 属性。您只需要在 properties 对象中包含所有要进行动画处理的属性即可。例如，您可以同时对元素的宽度和高度进行动画处理。
jQuery animate 中的 step 函数是一个回调函数，在动画的每个步骤中都会执行。此函数传递两个参数：now，它是动画属性的当前值；fx，它是一个包含有关动画的信息的对象。您可以使用 step 函数来创建复杂的动画或调试动画。
不可以，jQuery animate 方法仅适用于数值 CSS 属性。如果您尝试对非数值属性（如颜色或背景颜色）进行动画处理，则它将不起作用。但是，您可以使用 jQuery UI 或 jQuery Color 等插件来对这些属性进行动画处理。
您可以通过简单地一个接一个地调用多个 animate 方法来链接 jQuery 动画。jQuery 将按照调用的顺序执行动画。这称为“排队”，它是 jQuery 动画的一个强大功能。
是的，您可以使用 jQuery animate 方法创建滑动效果。您可以通过对元素的高度或宽度进行动画处理来实现此目的。但是，jQuery 还提供了 slideDown、slideUp 和 slideToggle 方法，如果您只想创建简单的滑动效果，则这些方法更容易使用。
有多种方法可以使您的 jQuery 动画更流畅。一种方法是使用缓动函数，这些函数控制动画的速度。另一种方法是使用 requestAnimationFrame 方法，该方法允许浏览器优化动画。您还可以通过最大限度地减少 DOM 操作次数并在可能的情况下使用 CSS 转换来提高性能。
是的，您可以在一组元素上使用 jQuery animate 方法。当您在一个包含多个元素的 jQuery 对象上调用 animate 方法时，动画将应用于集合中的所有元素。
您可以通过对 opacity 属性进行动画处理来使用 jQuery animate 方法创建淡入淡出效果。但是，jQuery 还提供了 fadeIn、fadeOut 和 fadeToggle 方法，如果您只想创建简单的淡入淡出效果，则这些方法更容易使用。
以上是JQuery Animate（）方法指南的详细内容。更多信息请关注PHP中文网其他相关文章！
