1. jQuery 中常用设置动画的方法

$("p").hide(1000);                  //隐藏
$("p").css("display", "none");

$("p").show(1000);      //显示

$("p").fadeOut();       //淡出，改变透明度

$("p").fadeIn();        //淡入

$("p").slideUp();       //改变高度

$("p").slideDown();

2. 自定义动画方法 animate()

格式

animate(params, speed, callback);

//params,样式及映射

//speed,速度

//callback,回调函数。在动画完成时执行的函数。

例子

<style type="text/css">

*{margin:0;padding:0;}

body { padding: 60px }

#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}

</style>



<div id="panel"></div>



<script src="../../scripts/jquery.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

    $("#panel").click(function(){

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

    })

})

</script>

3. 累加动画

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

4. 多重动画 1

在一个 animate() 方法中应用多个属性，动画是同时发生的。

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

5. 多重动画 2

当以链式写法应用动画方法时，动画是按照顺序发生的。

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

6. 综合动画

$(this).animate({left: "400px", height:"200px" ,opacity: "0.5"}, 3000)

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

    .fadeOut("slow");

7. 回调函数和 queue() 队列

动画执行完成后，调用回调函数

其他非动画方法会插队，如果也要按照顺序执行，要写在回调或者 queue() 方法中

$(this).animate({left: "400px", height:"200px" ,opacity: "0.5"}, 3000)

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

         $(this).css("border","5px solid blue");

     }).slideUp("slow");

});



$(this).animate({left: "400px", height:"200px" ,opacity: "0.5"}, 3000)

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

     .queue(function(next){

         $(this).css("border","5px solid blue");

         next(); //继续下一个动画

    })

    .slideUp("slow");

8. 判断是否动画中

if(!$("p").is(":animated")) {



}

9. 延迟动画

$(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)

        .delay(1000)

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

        .delay(2000)

        .fadeOut("slow");

10. 停止动画

stop([clearQueue],[gotoEnd]);

//clearQueue,清空队列

//gotoEnd,直接跳到动画的最终状态



$(this).stop();         //清除一个动画队列

$(this).stop(true);     //清除所有动画队列

$(this).stop(true, true);   //清除动画队列，并到达最终状态

<script>
 $(function () {

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


        $(".button2").click(function(){
                // $("#panel").stop();      //清除一个动画队列
                // $("#panel").stop(true);     //清除所有动画队列
                $("#panel").stop(true, true);   //清除动画队列，并到达最终状态
        })
    })
</script>

<div id="panel"></div>
<button class="button1">button1</button>
<button class="button2">button2</button>

11. 其他动画方法

toggle();       //切换可见

slideToggle();  //通过高度切换可见

fadeTo(600, 0.2);   //到哪个透明度？

fadeToggle()        //通过透明度切换可见