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

jquery-animate()

时间:2017-10-31 00:02:40      阅读:237      评论:0      收藏:0      [点我收藏+]

标签:ima   引用   star   col   art   width   fun   position   参数   

 1     <style>
 2         .big{
 3             /*width: 50px;*/
 4             height: 50px;
 5             background-color: #53ff53;
 6             position: relative;
 7         }
 8     </style>
 9     <script src="jquery/jquery-3.1.0.js"></script>
10 </head>
11 <body>
12     <div class="big"></div>
13     <script>
14         // animate()不支持非数字的属性,比如transform属性
15         // 按照动画的先后顺序执行
16         // $(".big").click(function(){
17         //     $(this).animate({"left":"500px"},1000).animate({"top":"300px"})
18         // })
19 
20 
21         // 当设置queue为false的时候,该动画不参与动画队列,而是直接开始执行
22         // $(function(){
23         //     $(".big").animate({"width":"100px"},2000).animate({"height":"600px"},1000).animate({"left":"300px"},{queue:false,duration:3000})
24         // })
25 
26 
27         // step选项,每部动画执行后调用的回调函数,接收两个参数now,fx,this 是当前正在执行动画的dom元素
28         // $(function(){
29         //     $(".big").animate({"left":"300px"},{step:function(now,fx){
30         //         $(this).css({"left":now,"transform":"rotate(30deg)"});
31         //     },duration:3000}
32         //     )
33         // })
34 
35 
36 
37         $(function(){
38             $(".big").animate({"top":"250px"},{step:function(now,fx){
39                 // console.log(now,fx)
40                 // now 每一步动画属性的数值
41                 // fx jQuery.fx原型对象的一个引用,其中包含很多属性,elem表示当前正在执行的动画,start和end分别为动画属性的第一个和最后一个的数值,prop为进行中的动画属性
42                 fx.elem.style.top=now;
43             },duration:3000})
44         })
45 
46 
47 
48     </script>

 

jquery-animate()

标签:ima   引用   star   col   art   width   fun   position   参数   

原文地址:http://www.cnblogs.com/cyany/p/7758142.html

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