jquery動畫-animate方法

時間 2019-11-11

原文原文鏈接

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>動畫</title>
 6     <style type="text/css">
 7         .box{
 8             width: 100px;
 9             height: 100px;
10             background-color: gold;
11         }
12     </style>
13     <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
14     <script type="text/javascript">
15         $(function(){
16 
17             /*
18              參數：
19             一、屬性設置{param1: value1, param2: value2}
20             二、speed 時間 ms
21             三、swing 默認值 開始和結束慢速，中間快速   linear 勻速
22             四、回調函數
23             */
24 
25             $("#div").animate({width:300,height:300},1000,"linear",function(){
26                     alert("動畫完了！");
27                     $(this).animate({marginLeft:500},1000,"linear",function(){
28                         $(this).animate({marginTop:500},1000,"linear");
29                     })
30                 })
31 
32         })
33     </script>
34 </head>
35 <body>
36     <div id="div" class="box"></div>
37 </body>
38 </html>

相關標籤/搜索