jQuery中的动画
一、基本动画
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（）方法的回调函数），动画是按照回调顺序发生的。
浙公网安备 33010602011771号