jquery学习（六）-jquery中的动画

参考锋利的jQuery第二版

1.show和hide方法

　　调用方法：element.hide()隐藏元素，element.show()显示元素。其实说白了，其原理就是将元素的样式display值设置为none或block。

若想让元素慢慢隐藏或显示，可以为其添加一个速度的参数，如element.show(500)，表示元素会在500毫秒内慢慢显示出来。

 

2.fadeIn和fadeOut方法

　　fadeIn和fadeOut分别是实现元素淡入和淡出的方法。其原理是通过一段时间内改变元素的不透明度（opacity）动画来实现淡入淡出的效果的，直到元素最终显示（display：block）或消失（display：none）。

可设置动画时长，如element.fadeOut(500)。

 

3.slideUp和slideDown方法

　　slideUp和slideDown分别实现上收隐藏和下拉显示的功能。其原理是通过改变元素的高度动画来实现的。如果一个元素的display：none，通过调用slideDown方法是，使得元素由上至下延伸显示。slideUp刚好与slideDown相反。

可设置动画时长，如element.slideDown(500)。

 

4.自定义动画方法animate

　　方法使用animate(params,speed,easing,callback)

　　Params: 一组包含作为动画属性和终值的样式属性和及其值的集合。

　　Speed:s三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)。

　　Easing: 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing"。

　　Callback:回调函数。

        例如：element.animate({ height: '20px' }, 500,'ease-out',

                          function(){console.log(“改变高动画”)});

5.停止动画stop(clearQueue,gotoNnd)

　　clearQueue和gotoEnd都是可选参数，为Bool值。clearQueue表示是否清空当前未执行完的动画队列，gotoEnd表示是否将正在执行的动画跳转到末状态。

　　举个栗子：

　　$(element).hover(function(){

       　　$(this).stop(false,true).animate({height:”300px”},200)

                     .animate({width:”200px”},300);

　　},function(){

      　　 $(this).stop(false,true).animate({height:”30px”},200)

                     .animate({width:”20px”},300);

　　});

 

6.判断处于动画状态

　　在使用动画的时候往往为了防止动画的积累，导致动画与用户行为不一致。此时就需要我们知道当前元素是否处于动画状态，当元素不出于动画阶段到为其添加动画，否则不添加。

　　举个栗子：

　　If(!$(element).is(“:animated”)){

      　　 //当没有动作状态时，才添加动画

　　}

 

7.动画延迟delay()

            Delay方法允许我们将队列中的函数延迟执行。

                     $(element).animate({width:”20px”},300).delay(1000)    //延迟1000毫秒

                            . animate({width:”200px”},300);

8.toggle方法元素状态切换

           $(element).toggle(fn1,fn2,fn3…)轮流循环切换。

9.slideToggle方法

　　通过高度变化来切换匹配元素的可见性。即实现元素下拉显示和上滑隐藏切换。

　　 $(element).slideToggle();