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()
原文地址：http://www.cnblogs.com/cyany/p/7758142.html