.animate()

.animate()方法允许我们在任意的数值的CSS属性上创建动画。唯一必要的属性就是一组CSS属性键值对。这组属性和用于设置.css()方法的属性键值对类似，除了属性范围做了更多限制。

Animation Properties and Values(动画属性和值)

所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能。（例如，width, height或者left可以执行动画，但是background-color不能，除非使用jQuery.Color()插件。）属性值的单位像素（px）,除非另有说明。单位em 和 %需要指定使用。

除了样式属性， 一些非样式的属性，如scrollTop 和 scrollLeft，以及自定义属性，也可应用于动画。

CSS简写属性（例如font, background, border）没有得到充分的支持。例如， 如果你想边框宽度做动画呈现，至少边框样式和边框宽度必须预先设定不为"auto" 。或者，如果你想字体大小做动画， 你可以使用fontSize的或相当于CSS的 'font-size' ，而不是简单的'font'。

除了定义数值，每个属性能使用'show', 'hide', 和 'toggle'。这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏。为了使用jQuery内置的切换状态跟踪，'toggle'关键字必须在动画开始前给定属性值。（注：jquery中有两个.toggle()方法，一个是显示或隐藏匹配元素。另一个是绑定两个或多个处理程序绑定到匹配的元素，用来执行在交替的点击。哪一个被调用取决于传递的参数的设置。所以这里'toggle'关键字必须在动画开始前给定属性值，以确认调用哪个'toggle'方法。）

动画属性也可以是一个相对值。如果提供一个以+= 或 -=开始的值，那么目标值就是以这个属性的当前值加上或者减去给定的数字来计算的。

注意: 不同于动画的简便方法，比如.slideDown() 和 .fadeIn(),.animate()方法不会影响隐藏元素的可见性部分的效果。例如，给定$('someElement').hide().animate({height:'20px'}, 500)，动画将执行，但该元素将保持隐藏。

Duration（持续时间）

持续时间是以毫秒为单位的；值越大表示动画执行的越慢，不是越快。还可以提供'fast' 和 'slow'字符串，分别表示持续时间为200 和 600毫秒。

Complete Function（完成函数）

如果提供complete回调函数将在动画完成后被执行一次。这对于按顺序执行一系列不同动画时，特别有用。这个回调函数不设置任何参数，但是this会被传递到正在执行动画的DOM元素上，如果多个元素一起做动画效果，值得注意的是这个回调函数在每个匹配元素上执行一次，不是这个动画作为一个整体。

Basic Usage（基本用法）

我们可以为任何元素做动画，比如这样的一个简单图片：

<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.
  });
});

注意我们这里给定了toggle作为height属性的目标值。由于这个图片开始是可见的，这个动画将收缩高度至0隐藏这个图片。第二次点击的时候将相反的转变：

这个图片的opacity已经是其目标值了，所以这个属性在第二次点击的时候不会有动画效果。由于我们给定了left目标值作为相对值，在第二次动画中图片将向右移动得更远。

如果元素的定位属性是静态的，即 position样式属性是static默认值，那么他们的定位属性（top, right, bottom, left)没有明显的效果。

注意: jQuery UI项目扩展了.animate()方法，允许一些非数值的样式，比如颜色，应用动画。该项目还包括通过CSS classes来指定动画的机制而不是单独的属性。

注意: 如果试图将元素高度或宽度动画至 0px，元素的内容是可见的，可能在动画中溢出。通过固定原始元素的尺寸，隐藏内容解决。这样可以确保动画平稳运行。一个clearfix 可以用来自动修复您的主要元素的尺寸，而无需手动设置。

Step Function

第二个版本的.animate()提供了一个step选项- 每步动画执行后调用的回调函数。启用自定义动画类型或改变正在执行的动画，此功能是非常有用。它接受两个参数（now 和 fx），this是当前正在执行动画的DOM元素集合。

• now: 每一步动画属性的数字值
• fx: jQuery.fx 原型对象的一个引用，其中包含了多项属性，比如elem 表示前正在执行动画的元素，start和end分别为动画属性的第一个和最后一个的值，prop为进行中的动画属性。

需要注意的是step函数被每个动画元素的每个动画属性调用。例如，给定两个列表项，step函数会被激发四次：

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

Easing（缓动）

.animate()还有一个参数是一个字符串命名的使用缓动函数。一个缓动函数指定用于动画进行中在不同点位的速度。 在jQuery库中是默认的时调用 swing。在一个恒定的速度进行动画，请调用 linear. 更多的缓动函数要使用的插件，最显着的是jQuery UI suite（译者注：或jQuery Easing Plugin插件）。

Per-property Easing

从jQuery 1.4 版本开始，我们能设置per-property 缓存函数访问一个单独的.animate()。在.animate()的第一个版本中，每个属性能获取一个数组作为他的值：数组的第一个成员是CSS属性，第二成员缓冲函数。如果为某个属性指定的缓冲函数尚未被定义，那么将会使用.animate() 方法的 easing 参数来代替。如果 easing 参数也未被定义，那么将会使用默认的缓冲函数 swing。

例如, 我们可以同时的使用swing缓冲函数来做width 和 height动画，并且用linear缓冲函数来做opacity动画：

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

在.animate()的第二个版本中，选项对象能包含specialEasing属性，该属性本身是一组CSS属性与相应的缓冲函数。例如，我们可以同时的使用linear缓冲函数来做width动画，并且用easeOutBounce缓冲函数来做height动画：

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

如前所述,easeOutBounce 函数是一个极其必要的插件。

• 所有的jQuery效果，包括.animate(),能使用jQuery.fx.off = true来全局性关闭。更多信息请查看jQuery.fx.off.