1 <style> 2 .big{ 3 /* 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>