jquery动画-animate方法

最新推荐文章于 2024-10-12 10:41:56 发布

diaoxidu3911

最新推荐文章于 2024-10-12 10:41:56 发布

阅读量96

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liangjianyuan/p/10279401.html

版权

 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>