本篇文章给大家带来的内容是jquery之深入学习animate（二），接着之前的文章【jquery之深入学习animate（一）】让大家了解jquery中animate的用法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
Step
Type： Function( Number now, Tween tween )
每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
这个是如此的模糊，让我们看下实例吧！
var k=0; $( ".block:first" ).animate( { left: 100,top:200 }, { duration: 1000, step: function( now, fx ){ k++; if(k==1) console.log(fx); });
登录后复制
你能想象输出结果吗？
让我们来看下jQuery源码吧：
jQuery.fx = Tween.prototype.init;...function Tween( elem, options, prop, end, easing ) { return new Tween.prototype.init( elem, options, prop, end, easing );}jQuery.Tween = Tween;Tween.prototype = { constructor: Tween, init: function( elem, options, prop, end, easing, unit ) { this.elem = elem; this.prop = prop; this.easing = easing || "swing"; this.options = options; this.start = this.now = this.cur(); this.end = end; this.unit = unit || ( jQuery.cssNumber[ prop ] ? "" : "px" ); },...}
登录后复制
ok！你应该有个大致的轮廓了，让我详细讲解下参数的意义吧~~
fx属性类型值easing字符串动画方式”linear”,swing,easeIn,easeOut…等elemDOM元素正在动画的元素end数值动画结束值now数值动画当前值options对象参数options.duration数值传到动画动的duration options.queue字符串动画队列pos数值在动画过程中从0.0到1.0prop字符串正在变化的css属性start数值CSS属性开始变化的值unit字符串CSS值的单位
知道这些，我们可以做很多事！
jQuery Animation实现css3动画 ：
jQuery Animation的工作原理是通过将元素的css样式从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如 “margin:30px”）。字符串值无法创建动画（比如 “background-color:red”）。
像CSS3好多效果因为不是数值的，所以是没有办法直接通过animate()方法实现的。如translate(), rotate(), scale(), skew(), matrix(), rotateX(), rotateY()等方法，这些方法的一个特点就是它们的值是字符和数字混合在一起的。因此我们是不可以直接用animate()方法来动态地修改它们的值来实现动画的效果。
如果我们自己用Javascript实现CSS3动画，那么我们只能自已通过setInterval()方法来实现，实现起来比较复杂。其实animate()方法就是基于setInterval()方法进行工作的，但是可以用方便的设置动画速度，还可以设置是匀速还是变速。animate()方法的第二种用法有个stp参数规定动画的每一步要执行的函数。我们可以用使用一个不影响元素效果显著的CSS值来触发animate()方法，然后在step回调函数中修改我们想要修改的值，这样就可以间接地实现动画了。
CSS代码：
#box { width:100px; height:100px; position:absolute; top:100px; left:100px; text-indent: 90px; background-color:red;}
登录后复制
Html代码：
登录后复制
Javascript代码：
var s=0;$('#box').animate({ textIndent: 0 }, { //这里的now参数即前面设置的数值，即textIndent: 0中的0，然后后面还有，则以后面的数值为准。 duration:2000, step: function(now,fx) { s++; fx.start=45;//你可以尝试修改start,end值，来看rotate的变化 fx.end=0; if(s==1) console.log(fx.start+"----"+fx.end+"---"+fx.startTime); $(this).css('-webkit-transform','rotate('+now+'deg)'); }});
登录后复制
这里使用text-indent属性来触发动画，是因为我们这里没有文字，所以使用text-indent而不会影响到元素的样式效果，这里也可以用font-size等。然后使用animate()方法产生的节奏来实现动画。
以上就是jQuery之深入学习Animate（二）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2737087.html
