jQuery是一个可爱的库，多年来，它已经改变了成千上万的开发人员处理其项目的方式。 创建jQuery时，CSS无法创建复杂的动画，而将JavaScript留给了发展之路。 由于为此目的创建了几种方法，jQuery在动画方面大有帮助。 尽管它带有一些简单的动画（ fadeIn() ， hide() ， slideDown()等），为了保持较低的权重，该库提供了一种非常灵活的方法，称为animate() ，该方法允许我们创建任何animate()我们想要的动画。 此方法是本文的主题。

jQuery的animate()是包装器方法 ，这意味着它可以对由jQuery包装的一组先前选择的DOM元素进行操作。 使用此方法，您可以将自己的自定义动画效果应用于集合中的元素。 为此，我们必须提供一组CSS样式属性和值，这些属性将在动画结束时到达。 样式在效果期间达到的中间值（由动画引擎自动处理）由效果的持续时间和缓动功能决定，我们将在后面讨论这两个选项。

可以动画化的CSS样式属性列表仅限于接受数字值的属性。 该值可以是绝对值（例如200），也可以是从起点开始的相对值。 在绝对值的情况下，jQuery假定像素为默认单位。 我们还可以指定其他单位，例如em，rem或百分比。 要指定相对值，我们必须在其前面加上+ =或-=，以分别指示正向或负向的相对目标值。

现在，我们对animate()有所了解了，是时候来看一下其签名和参数了。

签名和参数

此方法有两种主要形式，其大多数参数是可选的（使用通常的方括号表示）：

  • animate(properties[, duration][, easing][, callback])
  • animate(properties[, options])

关于参数还有很多要说的：

  • properties （对象）：一个散列，其中包含在动画结束时应达到的值。
  • duration （Number | String）：效果的持续时间（以毫秒为单位）或预定义的字符串之一：“ slow”（600毫秒），“ normal”（400毫秒）或“ fast”（200毫秒）。 默认值为“正常”。
  • easing （字符串）：执行过渡时要使用的缓动函数名称。 默认值为“ swing”。
  • callback （Function）：每个动画元素的动画制作完成时执行的函数。
  • options （对象）：包含一组传递给方法的选项的哈希。 可用的选项如下：
  • always （函数）：动画完成或停止但未完成时调用的函数。
  • complete （功能）：动画完成时执行的功能。
  • done （功能）：动画完成时调用的功能。
  • duration （String | Number）：与前面所述相同。
  • 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;
}

有了这个标记和CSS之后，使用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>
<button id="animation-button">Run!</button>
<span id="percentage">0</span>%

我们不必添加更多样式，因此我们可以跳到JavaScript代码的讨论。 要仅在单击按钮时运行动画，我们必须向按钮的click事件添加处理程序。 在处理程序内部，我们根据动画是运行还是完成，使用jQuery的prop()方法禁用和启用按钮。 最后，我们使用传递给附加在progress选项上的处理程序的第二个参数来显示动画的完整性百分比。 结果代码如下： 

$('#animation-button').click(function() {
   var $button = $(this);

   $('.rectangle')
      .find('.square-small')
      .animate({
            left: 280
         },
         {
            duration: 2000,
            start: function() {
               $button.prop('disabled', true);
            },
            complete: function() {
               $button.prop('disabled', false);
            },
            progress: function(animation, progress) {
               $('#percentage').text(Math.round(progress * 100));
            }
         }
      );
});

结论

本文讨论了我们可以使用jQuery的animate()方法执行的操作。 我们介绍了它的签名和它接受的参数。 在本文中，我们探讨了三个示例动画。 本文仅概述了animate()可能发生的情况。 实际上，只要有一点耐心和创造力，我们就可以制作出非常复杂且精美的动画。 您可以做的一个例子是Audero Smoke Effect ，这是我开发的jQuery插件，用于为网页上的一个或多个元素（通常是图像）创建烟雾效果。 有了它，您可以创造出一些烟熏，浮云或其他想要的效果，这些效果会从您选择的元素中出现。