.animate()
.animate( properties [, duration ] [, easing ] [, complete ] )
描述：实施某个CSS属性集合的自定义动画。
- properties类型：PlainObject一个CSS属性和值的对象，动画将根据这组对象移动。
- duration (默认值：
400)一个字符串或数字，用来确定动画运行多长时间。 - easing (默认值：
swing)类型：String一个字符串，标明为过渡使用哪种缓动函数。 - complete类型：Function()一个函数，在动画一旦结束时调用它，对每个匹配的元素调用一次。
- properties类型：PlainObject一个CSS属性和值的对象，动画将根据这组对象移动。
- options类型：PlainObject传递给该方法的一个额外选项的映射。
- duration (默认值：
400)一个字符串或数字，用来确定动画运行多长时间。 - easing (默认值：
swing)类型：String一个字符串，标明为过渡使用哪种缓动函数。 - queue (默认值：
true)一个布尔值，标明是否要把动画放到效果队列中。如果是false，动画将立即开始。自从jQuery 1.7，queue选项可以接受一个字符串，那样的话，动画将加到以那个字符串代表的队列中。如果使用了一个自定义队列名，动画不会自动开始；你必须调用.dequeue("queuename")来启动它。 - specialEasing类型：PlainObject一个对象，包含了一个或更多的用属性参数和它们对应的缓动函数定义的CSS属性。（加入于1.4）
- step一个函数，每个变动的元素的每个变动的CSS属性都会调用它。这个函数提供了一个改变Tween对象的机会，可以在该属性被设置之前改变该属性的值。
- progress一个函数，在每个动画阶结束时调用它，只对每个变动的元素调用一次，无论有多少个变动的属性。（加入于1.8）
- complete类型：Function()一个函数，每个元素上的动画结束时都会调用它一次。
- start一个函数，每个元素上的动画开始时都会调用它一次。（加入于1.8）
- done一个函数，每个元素上的动画结束时都会调用它一次（它的Promise对象被解决了）。（加入于1.8）
- fail一个函数，每个元素上的动画结束时都会调用它一次（它的Promise对象被拒绝了）。（加入于1.8）
- always一个函数，在某个元素上的动画，或者在没结束时停止的时候（该元素的Promise对象要么是被解决要么是被拒绝）调用它。（加入于1.8）
.animate()方法允许我们在任意数量的CSS属性上创建动画效果。唯一必不可少的参数是一个CSS属性的纯对象。该对象近似于设置给.css()方法的那个对象，除了属性的范围更严格。
动画属性和值
所有变动的属性必须变动到一个单一数字值，除了下面的提醒；大多数非数字的属性是不能使用基本jQuery功能变动的（比如说，width属性、height属性或者left属性可以变动，但是background-color属性不能，除非使用了jQuery.Color插件）。属性值会被视为一个数字，除非另有指定。单位em和%可以在适用的地方指定它们。
除了样式属性，有些非样式属性，比如说scrollTop和scrollLeft，以及自定义属性，也可以变动。
缩写的CSS属性（例如，font、background、border）还没有完全支持。举个例子，如果你想要变动呈现的边框宽度，至少border-style和border-color，必须先设置为除了auto之外的值。或者，如果你想变动font-size，你可以使用fontSize或者它的CSS等价物'font-size'，而不是简单地使用'font'。
除了数字值，每个属性可以取字符串'show'、'hide'以及'toggle'。这些简写允许考虑到元素的显示类型，自定义隐藏和显示动画。为了使用jQuery内建的交替状态跟踪，必须一致地给出'toggle'关键词，作为变动的属性的值。
变动的属性可以是相对的。如果一个值的前面加了+=或者-=这些字符，则目标值会根据属性的当前值累加或连减给定的数字计算出来。
注意：与某些简写动画方法，比如说.slideDown()和.fadeIn()不一样，.animate()方法并不把显示出隐藏的元素作为效果的一部分。举个例子，给定$("someElement").hide().animte({height:"20px"}, 500)，动画将运行，但是元素依然保持隐藏。
持续时间
持续时间用毫秒数指定；更大的数字表示更慢的动画，而不是更快的动画。持续时间的默认值是200毫秒。字符串'fast'表示200毫秒的持续时间，'slow'表示800毫秒的持续时间。
回调函数
如果提供了回调函数，几个回调函数start、step、progress、complete、done、fail和always都是在每个元素上调用的；this被设置为执行动画的DOM元素。如果集合中没有元素，就不会调用任何回调函数。如果变动了多个元素，回调函数会在每个匹配的元素上各执行一次，不是针对整个动画执行一次。使用.promise()方法可以获得一个promise对象，让你能够附加回调函数，该回调函数只对任何数量的变动集合引发一次，包括零个元素。
基础用法
要想变动任何元素，比如说变动一个图像：
<div id="clickme"> Click here </div> <img id="book" src="book.png" alt="" width="100" height="123" style="position: relative; left: 10px;">
要想同步地变动图像的opacity、left偏移和height：
$( "#clickme" ).click(function() {
$( "#book" ).animate({
opacity: 0.25,
left: "+=50",
height: "toggle"
}, 5000, function() {
// 动画完成。
});
});
注意height属性的目标值是'toggle'。因为图像之前是可视的，动画把图像的高度收缩到0以隐藏它。第二次点击会逆转这个过渡：
图像的opacity已经在它的目标值，所以第二次点击时该属性不会变动。因为针对left属性的目标值是一个相对值，在第二次动画过程中，图像会向右移动更远。
如果元素的position样式属性是默认值static，方向属性（top、right、bottom、left）在该元素上没有可辨别的效果。
jQuery UI项目扩展了.animate()方法，允许任何非数字的样式，比如说color变动起来。该项目还包括了通过CSS类指定动画的机制，而不只是指定独立的元素属性。
注意：如果试图变动一个height或width为0px的元素，因为overflow属性，元素的内容是可视的，在动画过程中，jQuery将裁剪overflow属性。然而，通过固定被隐藏的原始元素的维度，可以确保动画平滑地运行。clearfix可以用来自动固定你的主元素的维度，不需要人为设置它（请自动百度什么是clearfix）。
阶函数
.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>" );
}
});
缓动
.animate()方法的剩下的参数是一个字符串，命名了所用的缓动函数。缓动函数指定了在动画过程内不同的时点上动画推进的速度。在jQuery库内只有两个缓动实现器，一个是默认情况下，称为swing,另一个是以恒定的节奏推进，称为linear。更多的缓动函数要用插件才能使用，特别是使用jQuery UI suite插件。
针对每个属性的缓动
自从jQuery 1.4，你可以在一个.animate()调用中，设置针对每个属性的缓动函数。在.animate()方法的第一版中，每个属性可以取一个数组作为它的值：数组中的第一个成员是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()的第二版中，options对象可以包含specialEasing属性，它本身是一个CSS属性以及它们所对应的缓动函数的对象。举个例子，要想用swing缓动函数变动宽度，同时用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>" );
}
});
});
如前面所提醒的，要用easeOutBounce函数，必须要用到一个插件。
其它说明
- 所有的动画效果，包括
.animate()可以全局性地关闭，只要设置jQuery.fx.off=true，它会有效地把duration设置为0。要了解更多关于它的信息，参见jQuery.fx.off。
示例
点击按钮，让div的几个不动的属性变动起来。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>animate demo</title>
<style>
div {
background-color: #bca;
width: 100px;
border: 1px solid green;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="go">» Run</button>
<div id="block">Hello!</div>
<script>
// 在一个动画内使用多个单元类型
$( "#go" ).click(function() {
$( "#block" ).animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
</script>
</body>
</html>
演示结果
以一个相对的值变动一个div的left属性。在按钮上点击若干次，以看到相对动画队列进行。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>animate demo</title>
<style>
div {
position: absolute;
background-color: #abc;
left: 50px;
width: 90px;
height: 90px;
margin: 5px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="left">«</button>
<button id="right">»</button>
<div class="block"></div>
<script>
$( "#right" ).click(function() {
$( ".block" ).animate({ "left": "+=50px" }, "slow" );
});
$( "#left" ).click(function(){
$( ".block" ).animate({ "left": "-=50px" }, "slow" );
});
</script>
</body>
</html>
演示结果
第一个按钮显示了一个非队列的动画如何起作用。它把div展开到90%宽度，与此同时font-size增加了。一旦font-size改变结束，边框动画将开始了。第二个按钮开始了一个传统的连缀动画，在那里，每个动画将在该元素上的前一个动画结束的时候开始。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>animate demo</title>
<style>
div {
background-color: #bca;
width: 200px;
height: 1.1em;
text-align: center;
border: 2px solid green;
margin: 3px;
font-size: 14px;
}
button {
font-size: 14px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="go1">» Animate Block1</button>
<button id="go2">» Animate Block2</button>
<button id="go3">» Animate Both</button>
<button id="go4">» Reset</button>
<div id="block1">Block1</div>
<div id="block2">Block2</div>
<script>
$( "#go1" ).click(function() {
$( "#block1" )
.animate({
width: "90%"
}, {
queue: false,
duration: 3000
})
.animate({ fontSize: "24px" }, 1500 )
.animate({ borderRightWidth: "15px" }, 1500 );
});
$( "#go2" ).click(function() {
$( "#block2" )
.animate({ width: "90%" }, 1000 )
.animate({ fontSize: "24px" }, 1000 )
.animate({ borderLeftWidth: "15px" }, 1000 );
});
$( "#go3" ).click(function() {
$( "#go1" ).add( "#go2" ).click();
});
$( "#go4" ).click(function() {
$( "div" ).css({
width: "",
fontSize: "",
borderWidth: ""
});
});
</script>
</body>
</html>
演示结果
变动第一个div的left属性，并同步另一个div，使用step函数以在动画的每个阶段设置它们的left属性。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>animate demo</title>
<style>
div {
position: relative;
background-color: #abc;
width: 40px;
height: 40px;
float: left;
margin: 5px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p><button id="go">Run »</button></p>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<script>
$( "#go" ).click(function() {
$( ".block:first" ).animate({
left: 100
}, {
duration: 1000,
step: function( now, fx ){
$( ".block:gt(0)" ).css( "left", now );
}
});
});
</script>
</body>
</html>
演示结果
变动所有的段落文本，以交替height和opacity，在600毫秒内结束动画。
$( "p" ).animate({
height: "toggle",
opacity: "toggle"
}, "slow" );
变动所有的段落文本，left属性变成50，opacity属性变成1（完全不透明、可视），在500毫秒内结束动画。
$( "p" ).animate({
left: 50,
opacity: 1
}, 500 );
变动所有段落文本的left和opacity样式属性；在队列外面运行该动画，从而它会自动开始，不需要等待轮到它。
$( "p" ).animate({
left: "50px",
opacity: 1
}, {
duration: 500,
queue: false
});
一个使用“easein”函数的示例，提供了一个不同的动画样式。这只有在你用了一个提供缓动函数的插件的时候才能起作用。注意，只有在段落文本元素隐藏情况下这段代码才能起作用。
$( "p" ).animate({
opacity: "show"
}, "slow", "easein" );
变动所有的段落文本，以交替height和opacity，在600毫秒内结束动画。
$( "p" ).animate({
height: "toggle",
opacity: "toggle"
}, {
duration: "slow"
});
使用一个缓动函数，提供了一个不同的动画样式。这只有在你有了一个提供缓动函数的插件的时候才能起作用。
$( "p" ).animate({
opacity: "show"
}, {
duration: "slow",
easing: "easein"
});
让所有的段落文本动起来，并在动画结束时执行一个回调函数。第一个参数是一个CSS属性的对象，第二个参数指定了动画将耗时500毫秒才能结束，第三个参数声明了缓动类型，第四个参数是一个匿名的回调函数。
$( "p" ).animate({
height: 200,
width: 400,
opacity: 0.5
}, 1000, "linear", function() {
alert( "all done" );
});