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 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>