jQuery中的经典动画
show()方法和hide()方法是jQuery中的基本动画方法，hide()方法等于将css()方法设置display属性为none.如何让元素动起来呢，我们可以在show和hide里加入slow,fast,normal或者具体时间
1 $("element").show("slow");//注意加引号哦~ 2 $("element").hide(1000);
$("#panel h5.head").toggle(function(){ $(this).next().hide(600); },function(){ $(this).next().show(600); });
和show()方法不同，fadeIn()方法和fadeOut()方法只改变元素的透明度。slideUp()方法和slideDown()方法只会改变元素的高度，如果一个元素的属性值设置为none,当调用slideDown()方法时，这个元素将由上至下延伸显示。
jQuery中的任何动画效果，都可以指定3种速度参数，即"slow""normal""fast"(时间长度分别是0.6,0.4,0.2秒)
或具体的数字（）单位默认是毫秒。
自定义动画方法animate()
animate(params,speed,callback);
callback为在动画完成时执行的函数，可选。
下面介绍一下几种常见的动画：
1累加，累减动画
1 $(function(){ 2 $("#panel").click(function(){ 3 $(this).animate({left:"+=500px"},300); 4 }); 5 });
2多重动画
2.1同时执行多个动画
1 $(function(){ 2 $("#myImg").click(function(){ 3 $(this).animate({left:"500px",height:"200px"},3000) 4 }); 5 });
2.2按顺序执行多个动画
1 $(this).animate({left:"500px"},3000) 2 .animate({height:"200px"},3000);
3综合动画
1 $(function(){ 2 $("#panel").css("opacity","0.5"); 3 $("#panel").click(function(){ 4 $(this).animate({left:"400px",height:"200px",opacity:"1"},3000) 5 .animate({top:"200px",width:"200px"},3000) 6 .fadeOut("slow"); 7 }); 8 });
4回调函数
在上例中，如果想在最后一步中切换元素的css样式，而不是隐藏元素，能不能直接在后面加入css()方法呢，答案是不可以的，css()方法并不会加入到动画队列中去，而是立即执行。callback回调函数适用于jQuery所有的动画效果方法，只要把css()方法写在最后一个动画的回调函数里即可。
1 $(function(){ 2 $("#panel").css("opacity", "0.5");//设置不透明度 3 $("#panel").click(function(){ 4 $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000) 5 .animate({top: "200px" , width :"200px"}, 3000 ,function(){ 6 $(this).css("border","5px solid blue"); 7 }); 8 9 }); 10 });
5停止元素的动画
如果要在某处停止动画，需要使用stop()方法，语法结构：stop([clearQueue],[gotoEnd]);这两个参数都是可选参数，都是布尔值，第一个代表是否要清空未执行完的动画队列，第二个代表是否直接将正在执行的动画跳转到末状态。如果把第一个参数（clearQueue）设置为true,此时程序会把当前元素接下来尚未执行完的动画队列都清空，在遇到组合动画时的救急之术。stop(true,true)表示停止当前动画并直接到达到未执行动画队列的末状态。stop(false,true)可以让当前动画直接到达末状态。值得注意的是jQuery只能设置正在执行的动画的最终状态，而没有提供直接到达未执行动画队列最终状态的方法。
6判断元素是否处于动画状态
1 if(!$(element).is(":animated")){ 2 //如果没有新动画则添加新动画 3 }
7延迟动画
1 $(this).animate({left:"400px",height:"2000px",opacity:"1"},3000) 2 .delay(1000) 3 .animate({top:"200px",width:"200px"},3000) 4 delay(2000) 5 .fadeOut("slow");
8其他动画方法
8.1 toggle(speed,[callback])
1 $("#panel h5.head").toggle(function(){ 2 $(this).next().hide(); 3 },function(){ 4 $(this).next().show(); 5 });
8.2slideToggle()通过改变高度来切换匹配元素的可见性。
8.3 fadeTo()方法可以把元素的不透明度以渐近方式调整到指定的值。
8.4fadeToggle()方法通过不透明度变化来切换元素的可见性。
把简单的事情做好就是不简单，这些看似简单的动画好好运用一定有变幻莫测的奇迹~
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
