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>
