jQuery中的动画

一、show（）方法和hide（）方法

 

1、show()方法和hide()方法

show方法和hide方法是jQuery最基本的动画方法，在HTML文档里，为一个元素调用hide（）方法，会将钙元素的display样式改为“none”。也就是说：

$("elemetn").hide()；与element.css("dispaly","none");

当把元素隐藏后show（）方法会将样式display设置成block或者inline，或者其他除了none之外的值。

 

2、show方法和hide（）方法让元素动起来

可以为show（）方法至此那个一个速度参数，例如:
$("element").show("slow");参数的关机字还有normal、fast从slow到normal到fast分别为600、400、200毫秒，不仅仅可以使用这三个参数还可以直接指定一个数字。

$("element").show(1000);在100毫秒内展示；

 

二、fadeIn（）方法和fadeOut（）方法

 

1、fadeln（）方法和fadeOut（）方法只改变元素的不透明度。

fadeOut（）方法会在指定的一段时间内降低元素的不透明度，知道元素完全消失，fadeIn()则相反。

 

三、slideUp（）方法和slideDown（）方法

slideDown方法将元素由上至下延伸展示。slideUp（）正好相反，缩短上下展示。

 

四、自定义动画animate（）

 

语法结构：animate（params，speed，callback）；

参数说明如下：

（1）params：一个包含样式属性及值得映射，比如{property1：“value1",property2:"value2",...}。

（2）speed：速度参数，可选。

（3）callback：在动画完成时完成的函数，可选。

 

1、自定义简单动画

如：$(this).animate({left:"500px"},3000);

2、累加、累减动画

$(this).animate({left:"+=500px"},300);//当前位置加500px

3、多重动画

1）同时执行多个动画

$(this).animate({left:"500px",heitht:"200px"},3000);

 

2)按顺序执行多个动画

$(this).animate({left:"500px"},3000);

$(this).animate({height:"200px"},3000);

因为animate方法都是对同一个对象进行操作可以携程链式：

$(this).animate({left:"500px"},3000)

.anmate({height:"200px"},3000);

像这样动画效果执行具有先后顺序，称为动画队列。

 

4、综合动画

按照anmate的规则则可以对元素进行各种动画操作，进行各种动画操作的组合：

$(this).anmate({left:"400px",height:"200px",opcity:"1"},3000)

.anmate({top:"200px",width:"200px"},3000)

.fadeOut("slow");

 

五、动画回调函数

在上例中，如果想在最后一步切换元素的CSS样式，而不是隐藏元素：如果将fadeOut（“slow”）改成css（"border","5px solidblue");将不可以达到预期的效果，预期的是在动画最后一步执行css（）方法，但是在动画开始的时候就执行了，导致这个的原因是因为css（）方法不再动画队列中。可以使用回调函数（callback）对非动画方法实现排队。

例如：

.anmate({top:"200px",width:"200px"},3000，function（）{

//$(this).css("border","5px solid blue");

})

 

六、停止动画和判断是否处于动画状态

 

1、停止元素动画

stop（【clearQueue】【，gotoEnd】）；

参数clearQueue和gotoEnd都是可选的参数，为Boolean值（ture或flase）；

stop（）参数为空的时候一旦出发就会从当前触发时停止执行的动画；

当有多个组合动画的队列时，仅仅使用stop（）就不可以方便的执行了，这时候可以把第一个参数（cleanQueue)设置成true，此时程序会把当前元素接下来尚未执行完成的动画队列都清空。

 

第二个参数（gotoEnd）可以用于让正在执行的动画直接到达结束时刻的状态，通常用于后一个动画需要给予前一个动画的末状态的情况，可以通过stop(false,true)这种方式来让前动画直接到达末状态。

 

2、判断元素是否处于动画状态

当执行animate（）动画时，判断是否处于动画可以：
if（！$(element).is(":animated")){

//如果没有执行动画，再添加动画或者执行其他操作

}

 

七、其他动画效果

jQuery专门用于交互的动画方法：

toggle（speed，【callback】）

slideToggle（speed，【callback】）

fadeTo(speed,opacity,[callback])

 

1、toggle（）方法

可以切换元素的可见状态，如果元素是可见的，则切换为隐藏的如果元素是隐藏的则切换成可见的。

$(this).next("div.content").toggle();

 

2、slideToggle()方法

通过高度的变化切换匹配元素的可见性，这个效果只调整元素的高度。

相当于.slideUp()和slideDown方法不断的切换组合。

 

3、fadeTo（）方法

可以把元素的不透明度以渐进的方式调整到指定的值，这个动画只调整元素的不透明度

$(this).next("div.content").fadeTo(600,0.2);

 

八、动画方法的概括

基本动画方法hide（）和show（），到fadeIn()和fadeOut(),然后到slideUp（）和sildeDown（），再到自定义动画animate方法。