.animate() 方法允许我们在任何数值型 CSS 属性上创建动画。唯一需要的参数就是 CSS 属性映射。这个映射参数与传递给 .css() 方法的映射参数类似,只不过 .animate() 接受的映射参数中，对 CSS 属性的要求更严格（只能是数值型 CSS 属性）。

动画属性和属性值

所有动画属性，应该是在 单一数值 上运行的，除了以下提到的一些例外情况。大多数非数值属性是不能利用基本的 jQuery 功能来执行动画的(例如, width, height, 或 left 是可以使用动画的，但是不能在 background-color 上应用动画，除非使用了 jQuery.Color() 插件)。默认情况下，属性值的单位是像素，除非指定了其它的单位。可以指定的单位包括 em 和 %。

除了样式属性（style properties）外,还可以在一些非样式属性上（例如 scrollTop ， scrollLeft 和自定义属性）应用动画。

不完全支持简写的 CSS 属性 (例如， font, background, border)。例如，如果你想对边框的宽度应用动画，那么至少边框的样式和宽度应该是之前已经设置好了的，并且其值不能是 "auto"。或者，如果你想对文字大小应用动画，你应该使用 fontSize 或等价的 CSS 'font-size'，而不是简单的使用 'font'。

属性值除了可以是数值以外,还可以是 'show', 'hide', 和 'toggle' 这样的字符串。这些简称字符串可以用于自定义隐藏和显示动画，控件元素的显示。

动画的属性值可以是一个相对值。如果一个值是以 += 或 -= 开头的字符串，那么目标值会在当前值的基本上进行加减。

注意: 与 .slideDown() 和 .fadeIn() 方法不同,执行动画时，.animate() 方法不会将隐藏的元素显示出来。例如，在如下隐藏元素上执行动画：$('someElement').hide().animate({height:'20px'}, 500), 虽然动画会被执行，但是元素仍然是不可见的。

持续时间

duration 参数可以提供一个毫秒数，代表动画运行的时间，时间越长动画越慢。还可以提供字符串 'fast' 和 'slow' ，分别对应了 200 和 600 毫秒。如果没有设置 duration 参数，或者设置成其他无法识别的字符串，就会使用默认值 400 毫秒。

Complete 回调函数

如果提供了 complete 回调函数，那么在动画完成时，该函数会被调用。这对于按顺序执行一系列不同动画时，特别管用。该回调函数没有任何参数，但是 this 会被传递到执行动画的 DOM 元素中。如果有多个元素在执行动画，那么该回调函数会在每个匹配的元素执行完动画后被调用，也就是说，该回调函数会被调用多次，而不是只被调用一次。

基本用法

可以对任何元素使用动画。例如，对一个简单的图片应用动画：

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123"
  style="position: relative; left: 10px;" />

同时对透明度，左偏移值和高度应用动画：

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

注意上面例子中 height 属性的值是 'toggle'。因为图片一开始是显示的，所以执行动画时，该图片的高度会缩小成 0，然后再被隐藏起来。第二次点击时，动画执行过程刚好相反:

动画执行完之后，由于图片的 opacity 已经变成之前设定的 0.25，所以在第二次点击按钮执行动画时，图片的 opacity 将不会再发生变化，也就是说该属性上不会有动画效果。由于 left 属性是一个相对值，所以当再次执行动画时，图片会继续向右移动。

关于定位属性(例如，top, right, bottom, left)，如果元素的 position 属性是 static（该值为默认值），那么在执行动画时，该属性上不会有明显的动画效果。

注意: 在 jQuery UI 中，扩展了 .animate() 方法，允许在一些非数值型样式上应用动画，例如，颜色样式。同时也允许在指定动画的 CSS 样式时，不需要一一设置所需的样式属性，可以通过指定一个样式名的方法来代替。

注意: 如果尝试对高度或宽度为 0px 的元素进行动画时，那么该元素的内容是否会被显示，要依赖 overflow 属性。jQuery 在执行动画的过程中，可能会裁剪溢出部分。通过固定原始隐藏元素的大小，可以确保动画流畅的运行。（原文如下：By fixing the dimensions of the original element being hidden however, it is possible to ensure that the animation runs smoothly.）可以使用 clearfix 样式，自动为你的作为容器的元素固定大小，而不需要手动设置。

Step 回调函数

可以为 .animate() 提供一个 step 选项 — 一个回调函数,在动画执行每一步时会被调用。该回调函数适用于开启自定义动画或在动画发生时，需要改变动画的场合。该回调函数有两个参数(即，now 和 fx),在函数内部还可以使用 this，它指向正在执行动画的 DOM 元素。

• now: 执行动画的属性，在当前时刻的属性值（数值类型）
• fx: jQuery.fx 原型对象的引用。它包括一系列属性，例如，elem 代表当前正在执行动画的元素, start 和 end 分别代表正在执行动画的属性的第一个值和最后一个值， prop 代表正在执行的动画属性。

注意,每个需要执行动画的元素，以及该元素上的每个属性在执行动画时，step 函数都会被调用。假设有两个列表项，在执行如下动画时，step 函数会被调用 4 次：

$('li').animate({
  opacity: .5,
  height: '50%'
},
{
  step: function(now, fx) {
    var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
    $('body').append('<div>' + data + '</div>');
  }
});

缓冲效果

.animate() 方法中还有一个字符串参数，那就是在动画执行时，使用的缓冲函数的名字。缓冲函数指定了动画在不同位置的速度。jQuery 默认只提供两个缓冲效果：swing（默认值） 和 线性缓冲效果 linear。更多特效需要使用插件，可以访问 jQuery UI 网站来获得更多信息。

每个属性的缓冲效果

从 jQuery 1.4 开始，可以在 .animate() 中，为每个属性指定缓冲效果。在.animate(properties, [duration], [easing], [complete]) 中，每个属性可以使用数组作为参数。properties 参数是一个映射，其键代表 CSS 属性，其值代表缓冲函数。如果为某个属性指定的缓冲函数尚未被定义，那么将会使用 .animate() 方法的 easing 参数来代替。如果 easing 参数也未被定义，那么将会使用默认的缓冲函数 swing。

例如下例中，同时对元素的宽和高应用 swing 缓冲函数，对透明度应用 linear 缓冲函数:

$('#clickme').click(function() {
  $('#book').animate({
    width: ['toggle', 'swing'],
    height: ['toggle', 'swing'],
    opacity: 'toggle'
  }, 5000, 'linear', function() {
      $(this).after('<div>Animation complete.</div>');
  });
});

在 animate(properties, options) 中,options 参数中可以包含 specialEasing 属性，该属性本身是一个映射，其键是 CSS 属性，其值是所使用的缓冲函数。例如下例中，同时在元素的宽和高上使用动画，分别使用 linear 缓冲函数和 easeOutBounce 缓冲函数:

$('#clickme').click(function() {
  $('#book').animate({
    width: 'toggle',
    height: 'toggle'
  }, {
    duration: 5000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });
});

之前我们提到过，jQuery 默认只提供两个缓冲效果：swing（默认值） 和 线性缓冲效果 linear。因此，要想使用 easeOutBounce 缓冲函数，则需要插件的支持。

• 所有的 jQuery 动画, 包括 .animate(), 都可以被关闭，通过全局设置 jQuery.fx.off = true, 效果等同于将动画时间 duration 设置成 0. 可以访问 jQuery.fx.off 来获得更多信息。
• 由于 requestAnimationFrame() 特性的原因，绝对不要在 setInterval 或 setTimeout 方法中设置动画队列。 为了保护CPU资源, 支持 requestAnimationFrame 的浏览器在当前窗口或标签失去焦点时，是不更新动画的。如果你通过 setInterval 或 setTimeout 方法在动画暂停时，持续向队列里添加动画，那么在窗口或标签重新获得焦点时，所有在队列中的动画都会被播放。 为了避免这个潜在的问题,可以在循环时,利用最后一个动画的回调函数，或者给元素添加 .queue() 方法来避免这个问题，实现动画的继续播放。