jQuery动画使用总结
jQuery动画我用的比较多的仅仅只有show和hide，但是作为一个被我们大多数人所熟知的框架，相信他的动画功能还是比较多样的，这里做个小总结。
1.jQuery animate()，用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);
params:动画要操作的属性，几乎包括所有的css属性，不过需要注意，当要操作注入padding-left等时需要使用camel命名法，不能用小横线这种方式命名属性。同时，除了使用绝对值方式操作属性值，还可以使用相对值得方式，也就是在原来的基础上加减值。
speed:动画速度，可以是fast，slow，也可以是毫秒值。
callback:动画完成后执行的函数名称。
看一个例子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery动画</title> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> </head> <body> <button class="btn">开始动画</button> <div style="width: 400px;background-color: pink;" class="wrap"> <div style="width: 100px;background-color: lightcyan" class="content">i am content</div> </div> </body> <script> $('.btn').on('click', function() { $('.wrap').animate({ height: '300px',//可以使用绝对值 padding:'30px', }, 1000, function() { $('.content').animate({ width:'+=200px',//也可以使用相对值，在原来的基础上加或者减 marginTop:'100px'//camel命名法操作多个单词拼接的属性值 }, 1000, function() { alert('动画执行完毕！'); }); }); }); </script> </html>
给动画使用预定义值：slow，fast，toggle
$('.btn').on('click', function() {
$('.wrap').animate({
height: 'toggle'
});
});
toggle会让元素的height在没有到初始值之间切换。
使用动画的队列功能：如果给同一个元素，按照顺序定义不同的动画，则动画会按照定义顺序依次执行
$('.btn').on('click', function() {
$('.wrap').animate({heigt:'100px'});
$('.wrap').animate({width:'200px'});
});
如果我们把宽高变化，写在同一个animate中，则他们会同时变化，这样分开写，他们会按照我们书写的顺序，依次执行。
2.jQuery stop()，停止动画。
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
3.show()和hide():显示和隐藏元素，可带参数，决定动画的快慢。
duration：决定动画执行快慢的参数，可取fast，slow，normal和具体的数值，单位是毫秒。
easing：过渡的缓动函数，jQuery中提供两种匀速和变速，linear表示匀速直线运动，而swing则表示变速运动。
4.toggle():切换动画
5.slideUp()和slideDown(),slideToggle():上下动态隐藏元素
$('.btn').on('click', function() {
$('.wrap').slideToggle();
});
6.fadeIn(),fadeOut(),fadeToggle():淡入淡出显示和隐藏元素
7.fadeTo():让元素变化为固定的透明度
$('.btn').on('click', function() {
$('.wrap').fadeTo('slow',.5);
});
一般来说，toggle是该动画分类中两个相反子动画的组合动画，因此后面的例子都未给出。这些jQuery动画，除了自定义动画以外，基本分为三大类，fade，slide和show。show类动画是高度和透明度同时变化来显示和隐藏的动画。fade是改变透明度显示和隐藏的动画，slide类是通过改变高度来显示和隐藏的动画。
小结：在使用jQuery动画的过程中，如果我们希望同时改变高度和透明度，则使用show和hide。如果只希望改变高度，则使用slideUp和slideDown，如果只希望改变透明度则使用fadeIn和fadeOut。如果希望改变多个属性或者其他效果，则使用自定义动画。
