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源码吧,与先前的版本差别挺大的,所以用了最新的1.9

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...等
elem DOM元素 正在动画的元素
end 数值 动画结束值
now 数值 动画当前值
options 对象 参数
options.duration 数值 传到动画动的duration
 options.queue 字符串 动画队列
pos 数值 在动画过程中从0.0到1.0
prop 字符串 正在变化的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

 <div id="box"></div>

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()方法产生的节奏来实现动画。

参考文献

http://stackoverflow.com/questions/17038511/jquery-animate-step-function-with-attribute-value-initialization

http://www.css119.com/archives/1640

http://cdmckay.org/blog/2010/03/01/the-jquery-animate-step-callback-function/

http://www.bennadel.com/blog/1856-Using-jQuery-s-Animate-Step-Callback-Function-To-Create-Custom-Animations.htm

jQuery中Animate进阶用法(二)的更多相关文章

  1. jQuery中Animate进阶用法(一)

    jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...

  2. jQuery中Animate进阶用法(三)

    progressType: Function( Promise animation, Number progress, Number remainingMs )每一步动画完成后调用的一个函数,无论动画 ...

  3. jQuery中animate()方法用法实例

    本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. ani ...

  4. jQuery中eq()方法用法实例

    本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...

  5. jQuery中attr()方法用法实例

    本文实例讲述了jQuery中attr()方法用法.分享给大家供大家参考.具体分析如下: 此方法设置或返回匹配元素的属性值. attr()方法根据参数的不同,功能也不同. 语法结构一: 获取第一个匹配元 ...

  6. jQuery中$.each的用法

    jQuery中$.each的用法   本文导读:jQuery中each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象.数组的属性值并进行处理.jQuery提供的each方法 ...

  7. jQuery中on()方法用法实例详解

    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下 本 ...

  8. jQuery中index()方法用法实例

    本文实例讲述了jQuery中index()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以搜索匹配元素,并返回元素的索引值.索引值是从0开始的. 语法结构一: 当此方法没有参数的时候,返回值 ...

  9. jQuery中on()方法用法实例

    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能.定义及在匹配元素上绑定一个或者多个事件处理函数的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中on()方法 ...

随机推荐

  1. Linux shell (6)

    1.linux shell函数: 将一组命令集或语句形成一个可用的块,这些语句块成为函数. 2.shell 函数的组成:  函数名:函数的名字,注意一个脚本中函数名要唯一,否则会引起调用函数紊乱  函 ...

  2. 接口自动化学习--testNG

    一个月一更的节奏~ testNg是一个开源的自动化测试框架..具体那些什么特点的就不想打了- -,贴张图(虽然也看不懂): 学习网站:https://www.yiibai.com/testng 一样是 ...

  3. sql注入语句整理

    1.判断有无注入点; and 1=1 and 1=2 2.猜表一般的表的名称无非是admin adminuser user pass password 等..and 0<>(select ...

  4. PAT甲题题解-1049. Counting Ones-数学问题

    n位数,总共有0~10^n-1共计10^n个数那么所有数出现的总次数变为n*(10^n)个数1出现的次数便是十分之一,所以n位数中,1出现的次数为n*10^(n-1)知道这一个后,接下来就方便求了. ...

  5. Alpha阶段_团队分数分配

    小组成员 分数分配 薄霖 74 徐越 65 赵庶宏 65 赵铭 41 武鑫 39 卞忠昊 36 叶能端 30

  6. Scrum Meeting day 2

              第二次会议,开发人员会议 .  •    前端: 1. 登陆界面,login, sign up, 添加加载时的图片. 2. 主界面:采用类微信类型.应含有联系人.群聊.设置 3. ...

  7. Linux内核分析——第五周学习笔记

    第五周 扒开系统调用的“三层皮”(下) 一.知识点总结 (一)给MenuOS增加time和time-asm命令 在实验楼中,首先 强制删除menu (rm menu -rf) 重新克隆一个新版本的me ...

  8. BFS和DFS算法

    昨晚刚昨晚华为笔试题,用到了BFS和DFS,可惜自己学艺不精,忘记了实现原理,现在借用大佬写的内容给自己做个提高 转自:https://www.jianshu.com/p/70952b51f0c8 图 ...

  9. Four-Operations

    开发环境:Eclipse 结对小伙伴:201306114416 陈键 (http://www.cnblogs.com/be-the-one/) 201306114452 吴舒婷 (http://www ...

  10. 阿里Java编码规范

    详细,全面 很不错 阿里 Java编码规范