jQuery中的经典动画

   show()方法和hide()方法是jQuery中的基本动画方法，hide()方法等于将css()方法设置display属性为none.如何让元素动起来呢，我们可以在show和hide里加入slow,fast,normal或者具体时间

$("element").show("slow");//注意加引号哦~
$("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累加，累减动画

$(function(){
    $("#panel").click(function(){
        $(this).animate({left:"+=500px"},300);
    });
});

2多重动画
2.1同时执行多个动画

$(function(){
    $("#myImg").click(function(){
        $(this).animate({left:"500px",height:"200px"},3000)
    });
});

2.2按顺序执行多个动画

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

3综合动画

$(function(){
    $("#panel").css("opacity","0.5");
    $("#panel").click(function(){
        $(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
            .animate({top:"200px","200px"},3000)
            .fadeOut("slow");
    });
});

4回调函数
在上例中，如果想在最后一步中切换元素的css样式，而不是隐藏元素，能不能直接在后面加入css()方法呢，答案是不可以的，css()方法并不会加入到动画队列中去，而是立即执行。callback回调函数适用于jQuery所有的动画效果方法，只要把css()方法写在最后一个动画的回调函数里即可。

 $(function(){
        $("#panel").css("opacity", "0.5");//设置不透明度
        $("#panel").click(function(){
              $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
                     .animate({top: "200px" , width :"200px"}, 3000 ,function(){
                         $(this).css("border","5px solid blue");
                     });
                     
        });
    });

5停止元素的动画
如果要在某处停止动画，需要使用stop()方法，语法结构：stop([clearQueue],[gotoEnd]);这两个参数都是可选参数，都是布尔值，第一个代表是否要清空未执行完的动画队列，第二个代表是否直接将正在执行的动画跳转到末状态。如果把第一个参数（clearQueue）设置为true,此时程序会把当前元素接下来尚未执行完的动画队列都清空，在遇到组合动画时的救急之术。stop(true,true)表示停止当前动画并直接到达到未执行动画队列的末状态。stop(false,true)可以让当前动画直接到达末状态。值得注意的是jQuery只能设置正在执行的动画的最终状态，而没有提供直接到达未执行动画队列最终状态的方法。

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

if(!$(element).is(":animated")){
    //如果没有新动画则添加新动画
}

7延迟动画

$(this).animate({left:"400px",height:"2000px",opacity:"1"},3000)
        .delay(1000)
        .animate({top:"200px","200px"},3000)
        delay(2000)
        .fadeOut("slow");

8其他动画方法

8.1 toggle(speed,[callback])

$("#panel h5.head").toggle(function(){
    $(this).next().hide();
},function(){
    $(this).next().show();
});

8.2slideToggle()通过改变高度来切换匹配元素的可见性。

8.3 fadeTo()方法可以把元素的不透明度以渐近方式调整到指定的值。

8.4fadeToggle()方法通过不透明度变化来切换元素的可见性。

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