Jquery系列（五） 动画效果

引言：

               在网页中嵌入动画已经成为网页设计的趋势，利用jQuery中提供的动画方法，能实现这一视觉效果。

概述：

               小编在这里与大家分享四种动画方法，分别是显示与隐藏效果、滑动效果、淡入淡出效果、自定义动画效果。主要就是俩大类，jQuery自带的动画方法和开发人员自定义的动画方法。

内容：

               一 jQuery已有的动画方法

                       1 显示与隐藏

                 （1）隐藏元素的方法hide（）：在html中一个元素调用了hide（）方法，相当于在css中将相应的元素的display属性赋值为none。基本语法：$(selector).hide(speed,callback)，本方法参数都是可选的，speed是隐藏的速度参数，可选值包括slow、normal、fast和代表毫秒的整数值；callback代表隐藏完毕后要执行的方法；若不带任何参数，那么就是立即隐藏该元素。接下来的动画方法，语法都与hide类似，参数含义相同，只是方法名称不同。

                 （2）显示元素的方法show（）：如果元素被隐藏了，显示该元素。

                 （3）交替显示隐藏元素toggle（）方法：jQuery的toggle()方法可以自动切换hide()和show()，该方法监听每一个元素是否可见，若元素隐藏，执行show()，反之执行hide()。

                       2 滑动效果

                 （1）元素向上收缩方法slideUp()：向上滑动元素，从而实现向上收缩效果，若一个元素的display属性为none值，调用slideUp方法，元素将由下到上收缩显示。

                 （2）元素向下展开方法slideDown()：用于向下滑动元素，该方法通过使用滑动效果，将逐渐显示或隐藏被选择的元素，该方法适用于通过jQuery隐藏的元素或CSS中display为none值的元素，若元素已经是完全可见的，那么效果不产生任何变化，除非有callback函数。

                 （3）交替收缩展开方法slideToggle()：通过使用滑动效果来切换元素可见状态，若被选中的元素是可见的，就隐藏这些元素，反之显示元素。注意：若该元素已经是隐藏的，则该效果不产生任何变化，除非存在callback函数。

                       3 淡入淡出效果

                 （1）淡入方法fadeIn()：淡入显示已隐藏的元素，与show方法不同的是，本方法只改变元素的不透明度，在指定时间内提高元素的不透明度，直到元素完全显示。

                 （2）淡出方法fadeOut()：与fadeIn方法相反，指定时间内降低元素的不透明度，直到元素完全隐藏。

                 （3）交替淡入淡出效果：fadeIn和fadeOut交替进行。

                 （4）不透明方法fadeTo():把元素的不透明度以渐进的方式调整到指定的值，这个动画效果只是调整元素的不透明度，即匹配元素的高度和宽度不会发生变化，基本语法：$(selector).fadeTo(speed,opacity,callback),其中opacity是必选参数，表示淡入和淡出的透明度，必须介于0.00~1.00之间的数字。

               二 自定义的动画方法

              1 自定义动画：

                   jQuery可以通过animate()方法来自定义动画，基本语法：$(selector).animate(styles,speed,easing,callback)，styles是必选参数，表示产生动画效果的CSS样式和值。该方法的本质在于：通过CSS样式将元素的一个状态改变成另一个状态。

              2 动画队列：

                   动画队列出现解决了我们自定义的动画想在一个元素上实现连续动画效果的问题。jQuery包含一组队列控制方法queue()、dequeue()、clearQueue()，主要应用于实现动画队列的animate()方法、ajax以及其他要按时间顺序执行的事件中。基本语法：$(selector).queue(name,[callback])，参数name为必选项，当只传入该参数，方法将返回并指向第一个匹配元素的队列（函数数组，队列默认名称是fx）； 
参数callback分俩种情况：一是为函数，它将在匹配的元素的队列最后添加的一个函数，二是它为函数数组，将匹配元素的队列用新的一个队列来代替（函数数组）。              

                   注意：当通过queue方法设置函数队列时，应当确保最终调用了dequeue方法，这样队列中下一个排队的函数才能执行。

              3 动画延时和停止：

                               （1）延时delay方法：设置一个延时值来推迟后续队列中动画的执行，基本语法：$(selector).delay(duration,[queueName]),参数duration为延时的时间值，单位是毫秒；可选参数queueName表示动画队列的名称，默认为fx。

                             本方法允许将队列中的函数延时执行，既可推迟动画队列中函数的执行，也可以用于自定义队列，只有队列中的连续事件会延迟。

                   （2）停止stop方法：停止当前正在运行的动画，基本语法：$(selector).stop(stopAll,goToEnd)，可选参数stopAll是一个布尔值，表示是否停止正在执行的动画；另外一个可选参数goToEnd也是布尔值，表示十分立即完成正在执行的动画，该参数只能在设置了stopAll参数时使用。

总结：

              其实jQuery动画的实现的基本原理都是改变了元素的CSS样式，以前我们写CSS都是静态的，jQuery动画将元素的CSS样式和函数进行绑定，这样就能实现动态改变元素CSS样式的效果。还记的easyUI的效果，基本都是通过后面的动画序列做到的动态页面效果，easyUI等插件就是讲这些动画队列进行了封装，达到了页面的动态效果。