jQuery中的动画

jQuery中常用设置动画的方法

1. $("p").hide(1000); //隐藏
2. $("p").css("display", "none");
4. $("p").show(1000); //显示
6. $("p").fadeOut(); //淡出，改变透明度
8. $("p").fadeIn(); //淡入
10. $("p").slideUp(); //改变高度
12. $("p").slideDown();

自定义动画方法animate()

格式

1. animate(params, speed, callback);
3. //params,样式及映射
5. //speed,速度
7. //callback,回调函数。在动画完成时执行的函数。

例子

1. <style type="text/css">
3. *{margin:0;padding:0;}
5. body { padding: 60px }
7. #panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}
9. </style>
13. <div id="panel"></div>
17. <script src="../../scripts/jquery.js" type="text/javascript"></script>
19. <script type="text/javascript">
21. $(function(){
23. $("#panel").click(function(){
25. $(this).animate({left: "500px"}, 3000);
27. })
29. })
31. </script>

累加动画

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

多重动画1

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

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

多重动画2

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

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

综合动画

2. $(this).animate({left: "400px", height:"200px" ,opacity: "0.5"}, 3000)
4. .animate({top: "200px" , width :"200px"}, 3000 )
6. .fadeOut("slow");

回调函数和queue()队列

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

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

1. $(this).animate({left: "400px", height:"200px" ,opacity: "0.5"}, 3000)
3. .animate({top: "200px" , width :"200px"}, 3000 ,function(){
5. $(this).css("border","5px solid blue");
7. }).slideUp("slow");
9. });
13. $(this).animate({left: "400px", height:"200px" ,opacity: "0.5"}, 3000)
15. .animate({top: "200px" , width :"200px"}, 3000 )
17. .queue(function(next){
19. $(this).css("border","5px solid blue");
21. next(); //继续下一个动画
23. })
25. .slideUp("slow");

判断是否动画中

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

延迟动画

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

停止动画

1. stop([clearQueue],[gotoEnd]);
3. //clearQueue,清空队列
5. //gotoEnd,直接跳到动画的最终状态
9. $(this).stop(); //清除一个动画队列
11. $(this).stop(true); //清除所有动画队列
13. $(this).stop(true, true); //清除动画队列，并到达最终状态

1. <script>
2. $(function () {
4. $(".button1").click(function () {
5. $("#panel").animate({left: "400px", height:"200px" ,opacity: "0.5"}, 3000)
6. .animate({top: "200px" , width :"200px"}, 3000 )
7. .fadeOut("slow");
8. })
11. $(".button2").click(function(){
12. // $("#panel").stop(); //清除一个动画队列
13. // $("#panel").stop(true); //清除所有动画队列
14. $("#panel").stop(true, true); //清除动画队列，并到达最终状态
15. })
16. })
17. </script>
19. <div id="panel"></div>
20. <button class="button1">button1</button>
21. <button class="button2">button2</button>

其他动画方法

1. toggle(); //切换可见
3. slideToggle(); //通过高度切换可见
5. fadeTo(600, 0.2); //到哪个透明度？
7. fadeToggle() //通过透明度切换可见