jQuery动画总结

在JavaScript中动画也是比较突出的一部分，jQuery的代码简化同样也有动画的一部分。
jQuery动画主要分为四部分：
一、 基本效果
动画的最基本效果就是能显示，能隐藏。在jQuery中能够实现显示隐藏的方法有三种：

1. show()
   该方法能将隐藏的元素显示出来。
   语法：$(ele).show([speed],[easing],fn);
   speed代表显示出来的速度，默认值为0；easing代表显示的效果，默认效果为swing；fn代表在动画完成时执行的函数，每个元素执行一次。
   
   该例子是通过点击一个按钮执行点击事件将选择的元素慢慢的显示出来。
2. hide()
   该方法能将显示的元素隐藏起来。
   语法：$(ele).hide([speed],[easing],fn);
   
   该例子是通过一个点击事件将选择的元素用一秒钟时间匀速地隐藏起来。
3. toggle()
   该方法就是结合了上面两个方法为一体，调用该方法时如果元素是隐藏状态则显示，如果元素是显示状态则隐藏。
   语法：$(ele).toggle([speed],[easing],fn);
   
   该例子是通过一个点击事件将选择元素用一秒钟时间匀速的完成当前的隐藏或是显示动作，并在每一次执行结束后弹出提示“执行完毕”。
   二、 滑动效果
   滑动效果是通过基本效果延伸出来的方法。最基本的只能显示和隐藏，而滑动效果则通过滑动将元素以上卷下拉的卷帘式效果显示和隐藏。
   1.slideUp()
   该方法通过高度变化向上减小的方式动态的隐藏选择元素。
   语法：$(ele).slideUp([speed],[easing],fn);
   
   该例子是通过一个点击事件将选择元素用一秒钟时间匀速的完成当前的上卷隐藏动作。
   2.slideDown()
   该方法通过高度变化向下增大的方式动态的显示选择元素。
   语法：$(ele).slideDown([speed],[easing],fn);
   
   该例子是通过一个按钮执行点击事件将选择元素匀速的完成当前的下拉显示动作。
   3.slideToggle()
   该方法结合了上面两个方法为一体，通过高度变化向上减小向下增大的方式动态的显示或隐藏选择元素。
   语法：$(ele).slideToggle([speed],[easing],fn);
   
   该例子通过一个点击事件调用方法将选择元素上卷下拉方式隐藏或显示。
   三、 淡入淡出效果
   该效果是通过调整元素的透明度来实现元素的淡入淡出效果，这种效果的显示或者隐藏元素的大小不会发生任何改变。
   1.fadeOut()
   通过该方法调整选择元素的透明度从而实现元素的隐藏效果。
   语法：$(ele).fadeOut([speed],[easing],fn);
   
   该例子通过点击事件调整选择元素的透明度减小，最终实现淡出隐藏效果。
   2.fadeIn()
   通过该方法调整选择元素的透明度从而实现元素的显示效果。
   语法：$(ele).fadeIn([speed],[easing],fn);
   
   该例子通过点击事件调用方法调整选择元素的透明度增大，最终实现淡入显示效果。
   3.fadeToggle()
   该方法结合了上面两个方法为一体，通过该方法调整选择元素的透明度从而实现元素的显示和隐藏效果。
   语法：$(ele).fadeToggle([speed],[easing],fn);
   
   该例子通过点击事件调用方法调整选择元素的透明度增大或减小，最终实现淡入淡出显示或隐藏效果。
   4.fadeTo
   该方法能将选择元素的透明度调整到指定透明度。
   语法：$(ele).fadeTo([speed],[opacity],[easing],fn);
   opacity代表透明度，通过这个参数可以指定具体透明度值。
   
   该方法通过一个点击事件调用方法将选择元素用一秒钟时间完成将元素的透明变为原本的一半。
   四、 自定义动画
   通过前面几种方式已经了解到元素最基本的一些动画，如果要设置更复杂的动画就要使用animation动画来实现了。
   1.animat()
   (1) 该方法就是jQuery中设置复杂动画的方法。
   (2) 它的值是一个集合，所以可以一次性设置多个样式的改变。不过所设置改变的属性值只能是数字的，如果不是数字的属性只能通过其它插件去实现，比如宽度、高度、字体大小等等都可以；比如说background-color就不行，它的参数为color或是rgba；还有设置+=或者-=的值就是以原有值基础上加或减去该值。
   (3) 集合内动画属性值的单位都是像素（px），除非另有说明，其它单位则需要指定使用。
   (4) 在集合中的属性名一般使用驼峰式写法（font-size用fontSize代替），如果还是按原来的写法就需要加上英文状态下的引号（""或者＇＇）。
   (5) 语法：$(ele).animate([params],[speed],[easing],fn);
   params代表动画属性和最终值的样式属性以及属性值的集合{属性:属性值,属性:属性值}。
   
   该方法通过点击事件执行选择元素的animation动画事件，改变元素的属性。