码迷,mamicode.com
首页 > Web开发 > 详细

第十二节 jQuery动画

时间:2020-03-14 20:09:37      阅读:73      评论:0      收藏:0      [点我收藏+]

标签:ima   ack   rip   stop   meta   NPU   html   put   round   

 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>

 

第十二节 jQuery动画

标签:ima   ack   rip   stop   meta   NPU   html   put   round   

原文地址:https://www.cnblogs.com/kogmaw/p/12493728.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!