1 <!DOCTYPE html>
2 <html >
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 1、屬性設定{param1: value1, param2: value2}
20 2、speed 時間 ms
21 3、swing 預設值 開始和結束慢速，中間快速 linear 勻速
22 4、回調函數
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> 轉載于:https://www.cnblogs.com/liangjianyuan/p/10279401.html
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)