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>