Jquery动画
Jquery动画可以分为三部分：内置动画（非自定义动画），非内置（自定义）动画，动画的设置
一、非自定义动画：
1.显示、隐藏：
show( )显示 、hide( )隐藏、toggle()显示/隐藏
show()、hide()、toggle()方法有两种用法，一种是不传参数，代表直接显示隐藏。
另一种是向方法中传递一个参数，这个参数为number类型，代表动画的执行时间。会有显示隐藏的动画效果。
示例:show(100)、hide(100)、toggle(100)
不仅如此，jQuery还为动画方法提供了三种字符串形式的参数，分别是：fast、slow、和空字符串''
show('fast')、hide('slow')、toggle('')
三种参数的执行时间，分别为 ，'fast' ：200毫秒 ''(默认值):400毫秒 'slow'：600毫秒
2.滑动：
slideUp()：向上滑动（隐藏）
slideDown():向下滑动（显示）
slideToggle()：滑动（自动）
3.淡入淡出：
fadeOut():淡出（隐藏）
fadeIn():淡入（显示）
fadeToggle():显示隐藏（）自动
该方法是将元素的透明度从1变成零之后将元素的display属性设置为none;
但是如果我们想要将透明度设置到一个固定值，这些方法并不能实现，jQuery为我们提供了一个方法fadeTo()，该方法接受两个参数。
第一个参数是动画执行的时间，第二个参数是期望达到的透明度。
二、自定义动画
animate()方法
animate()方法有三个参数。分别是动画目标(target),动画执行时间，回调函数。只有第一个参数是必填参数。
animate()方法的使用：
1.animate({
'width':'200px'，
'height':'200px'
})
将元素属性变换为自定义动画中的目标属性，所有参数中的属性一起改变。
2.animate({
'width':'+=200px'
})
设置的属性，支持运算。
3.动画的执行顺序：
如果想要动画按照顺序执行（执行完第一个动画之后，再执行下一个动画）有三种方法：
1）借助动画的回调函数。
$('input').click(function(){
$('div').animate({
'width':'400px',
'height':'400px',
},function(){
$('div').animate({
'width':'200px',
'height':'200px'
})
})
})
2）将动画效果分开写
$('input').click(function(){
$('div').animate({
'width':'400px',
'height':'400px',
})
$('div').animate({
'width':'200px',
'height':'200px'
})
})
3）连缀
$('input').click(function(){
$('div').animate({
'width':'400px',
'height':'400px',
}).animate({
'width':'200px',
'height':'200px'
})
})
在操作同一元素的时候，推荐使用连缀。在操作不同元素的时候，推荐使用回调函数。
连缀：jquery的动画方法，每次调用都会返回当前选择的元素，从而可以让jQuery可以实现连缀。
三、动画的执行顺序。
当我想要执行一个其他方法的时候，比如给当前元素加一个背景颜色。
$('input').click(function(){
$('div').animate({
'width':'400px',
'height':'400px',
}).animate({
'width':'200px',
'height':'200px'
}).css('background','yellow')
})
问题出现了：当我按照连缀写法，并没有出现我想要的效果所有方法都按照顺序执行，而是将css方法提前执行了。
问题分析：根据我们以往写运动框架的经验，知道每个动画都是有定时器的，发生这个问题原因就在于此，定时器是异步的，在运行动画的时候我们后面的方法会继续执行，也就出现了上面的问题。
解决：
1）可以用回调函数解决：
$('input').click(function(){
$('div').animate({
'width':'400px',
'height':'400px',
}).animate({
'width':'200px',
'height':'200px'
},function(){
$(this).css('background','yellow')
})
})
2）jquery给我们提供了一个类似于回调函数的方法queue()：
$('input').click(function(){
$('div').animate({
'width':'400px',
'height':'400px',
}).animate({
'width':'200px',
'height':'200px'
}).queue(function(){
$(this).css('background','yellow')
})
})
queue()方法的问题:
当我想要在这个列队函数中再加一个动画的时候，发现在queue()方法后的函数无法执行。
$('input').click(function(){
$('div').animate({
'width':'400px',
'height':'400px',
}).animate({
'width':'200px',
'height':'200px'
}).queue(function(next){
$(this).css('background','yellow');
next();
}).hide('400')
})
原理：连缀的原理是因为每个jquery动画方法都会提供一个返回值，这个返回值就是所选择的元素，queue()方法并不会提供一个返回值。为了让连缀继续，我们这时候应该让queue()方法有一个返回值。jquery为queue提供了一个参数next,我们只需要在queue()方法中传入这个参数并调用，那么queue()方法就有了一个返回值，连缀就可以继续了。
四、动画及相关方法
1.stop()方法
这个方法是停止动画的方法，他有两个参数，都是布尔值。第一个参数代表是否清除动画队列，第二个参数代表是否直接运行到最后结果。
2.delay()方法
延时执行，该方法有一个参数，是延时执行的毫秒数。
3.动画的递归
$('div').slideToggle(2000,recursion)
function recursion(){
$(this).slideToggle(2000,recursion)
}
高级写法：
$('div').slideToggle(2000,function(){
$(this).slideToggle(2000,arguments.callee)
})
arguments.callee：常用在匿名函数中， 代表当前的函数。
4.动画的全局方法
$.fx.interval 属性可以调整动画每秒的运行帧数，默认为 13 毫秒。数字越小越流畅，但可能影响程序性能。
$.fx.interval=1000;动画的帧数设置。
$.fx.off=true;动画关闭。
动画队列可以说是动画执行的一个顺序机制，当我们对一个对象添加多次动画效果时后，添加的动作就会被放入这个动画队列中，等前面的动画完成后再开始执行。
动画队列机制和执行顺序
- 对于一组元素上的动画效果，有如下两种情况：
当在一个animate()方法中应用多个属性时，动画是同时发生的。
当以链式的写法应用动画方法时，动画是按照顺序发生的。
2.对于多组元素上的动画效果，有如下情况：
默认情况下，动画都是同时发生的。
当以回调的形式应用动画方式时，动画是按照回调顺序发生的。
以上是整个动画的调度一个流程，其实都是利用队列异步的空闲然后执行同步的代码，这样在处理上是没有浪费资源的，而且精确度也是最高的。