1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script type="text/javascript" src="../jquery-1.12.4.min.js"></script> 7 <script type="text/javascript"> 8 /* 9 $(function(){ 10 $('#btn').click(function(){ 11 $('.box').animate({'width':'600px'},2000,function(){ 12 $('.box').animate({'height':'400px'},2000); 13 }); 14 }) 15 16 }); 17 */ 18 $(function(){ 19 $('#btn').click(function(){ 20 $('.box').animate({'width':'+=100'},2000,function(){ 21 $('.box').stop().animate({'height':'400px'},2000); 22 // .stop()持续点击的时候会造成延时bug，添加stop是指结束动画再开始动画 23 }); 24 }) 25 26 }); 27 </script> 28 29 30 <style type="text/css"> 31 .box{ 32 width: 100px; 33 height: 100px; 34 background-color: gold; 35 } 36 </style> 37 </head> 38 <body> 39 <input type="button" name="" value="动画" id="btn"> 40 <div class="box"></div> 41 </body> 42 </html>