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()方法通过不透明度变化来切换元素的可见性。

把简单的事情做好就是不简单，这些看似简单的动画好好运用一定有变幻莫测的奇迹~