第十二节 jQuery动画

 1 DOCTYPE html>
 2 html lang="en">
 3 head>
 4     meta charset="UTF-8">
 5     title>Documenttitle>
 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>