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>
