一、基本动画

1、show（）方法和hide（）方法：改变display属性

为一个元素调用hide（）方法，会将该元素的display样式改为“display：none”。

$(“element”).hide()       //通过hide元素隐藏元素

$(“element”).css(“display: none”)        //通过css（）方法隐藏元素

以上两种隐藏元素的方法效果一致

在元素调用了hide（）方法后，可以为该元素调用show（）方法将元素的display样式设置为hide（）方法调用之前的显示状态（“block”或”hide”或其他除了“none”之外的值）

$(“element”).show( )

注意在hide（）方法将元素隐藏之前，会记住原先的display属性值，当调用show（）方法时，就会根据hide（）方法记住的display属性值来显示元素。

2、fadeIn（）方法和fadeOut（）方法：改变元素的不透明度

与show（）方法和hide（）方法不同，fadeIn（）方法和fadeOut（）方法只改变元素的不透明度。fadeOut（）方法在指定的一段时间内降低元素的不透明度，直到元素完全消失。fadeIn（）方法则相反。

3、slideUp（）方法和slideDown（）方法：改变元素的高度

slideUp（）方法和slideDown（）方法只会改变元素的高度。当元素的display属性值为“none”，当调用slideDown（）方法时，元素将由上至下延伸显示。slideUp（）方法则相反，元素将由下到上缩短隐藏。

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

show（）和hide（）方法在不带任何参数情况下，相当于css（“display”，“none/block/inline”），作用是立即隐藏或显示匹配的元素，不会有任何动画。

为show（）和hide（）方法指定一个速度参数就可以让元素以该速度显示/隐藏。

参数选择：

①可以使用关键字：“slow”（600ms）或“normal”（400ms）或“fast”（200ms）

$(“element”).hide(“slow”)             //让元素以“slow”600ms的速度慢慢地隐藏起来

$(“element”).show(“fast”)             //让元素以“fast”200ms的速度显示出来

②使用数字，单位是毫秒ms

$(“element”).hide(1000)                  //让元素以1000ms的速度隐藏起来

5、jQuery中的任何动画效果，都可以指定3种速度参数，即“slow”、“normal”和“fast”（时间长度分别是0.6s、0.4s和0.2s）。当使用速度关键字时要加入引号，如show（“slow”）。如果用数字作为时间参数时就不需要加入引号，如hide（1000）。

二、自定义动画方法animate（）

语法结构：

animate（params，speed，callback）

参数说明：

①params：一个包含样式属性及值的映射，比如｛property1：“value1”，protery2：“value2”，……｝

②speed：速度参数，可选

③callback：在动画完成时执行的函数，可选

1、自定义简单动画

例如，为id为“panel”的元素创建一个单击事件，然后对元素加入animate（）方法，使元素在2s内向右移动500px：

$(function(){

$(“#panel”).click(function(){

$(this).animate({left:”500px”},2000};

});

});

2、累加、累减动画

在之前的代码中，设置了｛left：“500px”｝作为动画参数。如果在500px之前加上“+=”或者“-=”符号即表示在当前位置累加或者累减。

例如：

$（function(){

$(“#panel”).click(function(){

$(this）.animate({left:"+=500px”},3000);   //在当前位置累加500px

});

});

3、多重动画

①同时执行多个动画

例如：

$(function(){

$(“#panel”).click(function(){

$(this).animate({left:”500px”,”height:”200px”},2000);    //向右移动和高度变为200是同时进行的

});

});

②按顺序执行多个动画

例如：

$(function(){

$(this).animate({left:”500px”}，2000）；

$(this).animate({height:”200px”},2000);

});

也可以改为链式写法

例如：

$(function(){

$(this).animate({left:”500px”},2000)

.animate({height:”200px”},2000);

});

4、综合动画

例如：

$(function(){

$(“#panel”).css(“opacity”,”0.7”);

$(“#panel”).click(function(){

$(this).animate({left:”500px”,height:”200px”,opacity:”1”},2000)

.animate({top:”200px”,width:”200px”},2000).

.fadeOut(“normal”);

});

});

5、动画回调函数

以上代码，预期结果是在动画最后一步改变border样式：

$(function(){

$(“#panel”).css(“opacity”,”0.7”);

$(“#panel”).click(function(){

$(this).animate({left:”500px”,height:”200px”,opacity:”1”},2000)

.animate({top:”200px”,width:”200px”},2000).

.css(“border”,”5px solid #000”);

});

});

然而，这并不能得到预期的结果，实际结果是刚开始执行动画的时候，css（）方法就被执行了。

原因：css（）方法并不会加入动画队列中，而是立即执行。

解决方案：使用回调函数（callback）对非动画方法实现排队

例如：

$(function(){

$(“#panel”).css(“opacity”,”0.7”);

$(“#panel”).click(function(){

$(this).animate({left:”500px”,height:”200px”,opacity:”1”},2000)

.animate({top:”200px”,width:”200px”},2000，function(){

$(this).css(“border”,”5px solid #000”);

});

});

注意：callback函数适用于所有jQuery动画效果方法

例如：

$(“#element”).slideDown(200,function(){

//在效果完成后做其他事情

})；

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

①停止元素的动画

使用stop（）方法来停止动画

语法结构：stop([clearQueue].[gotoEnd]);

两个参数都是可选，为Boolean值（true或false）。

clearQueue代表是否要清空未执行完的动画队列，toToEnd代表是否直接将正在执行的动画跳转到末状态。直接使用stop（）方法，则会立即停止当前正在进行的动画，如果接下来还有动画等待继续进行，则以当前状态开始接下来的动画。

问题：当为一个元素绑定hover事件之后，用户把光标移入元素时会触发动画效果，而当这个动画还没结束时，用户就将光标移出这个元素，那么光标移出的动画效果将会被放进队列中，等待光标移入的动画结束后再执行。因此如果光标移入移出过快就会导致动画效果与光标的动作不一致。

解决方法：在光标移入、移出动画之前加入stop（）方法。stop（）方法会结束当前正在进行的动画，并立即执行队列中的一个动画。

例如：

$(“#panel”).hover(function(){

$(this).stop()

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

}.function(){

$(this).stop()

.animate({height:”22”,width:”60”},300);

});

如果遇到组合动画，例如：

$(“#panel”).hover(function(){

$(this).stop()

.animate({height:”500px”},200)            //如果在此时触发了光标移出的事件，将执行下面的动画

.animate({width:”200px”},300);           //而不是光标移出事件中的动画

}.function(){

$(this).stop()

.animate({height:”22”},200)

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

});

问题：此时如果动画正执行在第一个阶段（改变height阶段）触发光标移出事件后，只会停止当前的动画，并继续进行下面的animate({width:”200px”},300); 动画，而光标移出事件中的动画要等这个动画结束后才会继续执行

解决方法：把stop（）方法的第一个参数（clearQueue）设置为true，此时程序会把当前元素接下来尚未执行的动画队列清空。

更改后的代码：

$(“#panel”).hover(function(){

$(this).stop(true)

.animate({height:”500px”},200)            //如果在此时触发了光标移出的事件，将执行下面的动画

.animate({width:”200px”},300);           //而不是光标移出事件中的动画

}.function(){

$(this).stop()

.animate({height:”22”},200)

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

});

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

stop（true,true）：则停止当前动画并直接到达当前动画的末状态，并清空动画队列。

注意：jQuery只能设置正在执行的动画最终状态，而没有提供直接到达未执行动画队列最终状态的方法。

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

在使用animate（）方法的时候，要避免动画积累而导致的动画与用户的行为不一致。当用户快速在某个元素上执行animate（）动画时，就会出现动画累积。如果元素不处于动画状态，才为元素添加新的动画，否则不添加。

③延迟动画

delay方法允许我们将队列中的函数延时执行。它既可以推迟队列中函数的执行，也可以用于自定义队列。

例如：

$(this).animate(｛left:”400px”,height:”200px”,opacity:”1”｝,3000)

.delay(1000)

.animate({top:”200px”,width:”200px”},3000)

.delay(2000)

.fadeOut(“slow”);

三、其他动画方法

另外4个专门用于交互的动画方法：

①toggle（speed，[callback]）

②slideToggle（speed，[easing],[callback]）

③fadeTo（speed,opacity,[callback]）

④fadeToggle（speed，[easing]，[callback]）

1、toggle（）方法:toggle方法可以切换元素的可见状态。如果元素是可见的，则切换为隐藏的；如果元素是隐藏的，则切换为可见。

例如：

$(“#panel”).toggle(function(){

$(this).next().toggle();

});

相当于jQuery代码：

$(“#panel”).click(function(){

$(this).next().hide();

}.function(){

$(this).next().show();

}):

2、slideToggle（）方法：通过高度变化来切换匹配元素的可见性。

例如：

$(“#panel”).slideToggle(function(){

$(this).next().slideToggle();

});

相当于jQuery代码：

$(“#panel”).click(function(){

$(this).next().slideDown();

}.function(){

$(this).next().slideUp();

}):

3、fadeTo（）方法：可以把元素的不透明度以渐进方式调整到指定的值。

例如：

$(“#panel”).fadeTo(function(){

$(this).next().fadeTo(600，0.2);

});

当链接被单击后，“内容”会以600s的速度调整到指定的不透明度0.2

4、fadeToggle（）方法：通过不透明度变化来切换匹配元素的可见性。只调整元素的不透明度

$(“#panel”).fadeToggle(function(){

$(this).next().fadeToggle();

});

相当于jQuery代码：

$(“#panel”).click(function(){

$(this).next().fadeToggle();

}.function(){

$(this).next().fadeToggle();

}):

四、动画方法概括

1、改变样式属性

方法名	说明
hide（）和show（）	同时修改多个样式属性即高度、宽度和不透明度
fadeIn（）和fadeOut（）	只改变不透明度
slideUp（）和slideDown（）	只改变高度
fadeTo（）	只改变不透明度
toggle（）	用来代替hide（）方法和show（）方法，所以会同时修改多个样式属性即高度、宽度和不透明度
slideToggle（）	用来代替slideUp（）方法和slideDown（）方法，所以只能改变高度
fadeToggle（）	用来代替slideIn（）方法和fadeOut（）方法，所以只能改变不透明度
animate（）	属于自定义动画的方法，以上各种动画实质内部都调用了animate（）方法。

特别注意animate（）方法，可以使用它来替代其他所有的动画方法。

2、动画队列

（1）一组元素上的动画效果

①当在一个animate（）方法中应用多个属性时，动画是同时发生的。

②当以链式的写法应用动画方法时，动画是按照顺序发生的（除法queue选项值是false）

（2）多组元素上的动画效果

①默认情况下，动画都是同时发生的

②当以回调的形式应用动画方式时（包括动画的回调函数和queue（）方法的回调函数），动画是按照回调顺序发生的。