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. PHP学习 类型 变量 常数 运算符

    PHP支持下列8种类型 标量类型 scalar type整数 integer浮点数 float double布尔 boolean字符串 string 特殊类型 special typeNULL资源 r ...

  2. 2-Eighteenth Scrum Meeting-20151218

    任务安排 成员 今日完成 明日任务 闫昊 写完学习进度记录的数据库操作  写完学习进度记录的数据库操作 唐彬 编写与服务器交互的代码 和服务器老师交流讨论区后台接口 史烨轩 获取视频url  尝试使用 ...

  3. IOS的开发演变历史

    对IOS开发平台一直抱有很大兴趣,正好通过这个机会好好了解一下IOS的开发历程! 通过一些查阅,我了解到IOS的开发平台主要是依靠Xcode软件来编写程序,同时又需要在MAC OS X的环境下运行,w ...

  4. C语言入门:02.第一个C语言程序

    一.开发工具的选择(1)可以用来写代码的工具:记事本.UltraEdit.Vim.Xcode等(2)选择Xcode的原因:苹果官方提供的开发利器.简化开发过程.有高亮显示功能 (3)使用Xcode新建 ...

  5. Linux kernel 发布 5.0-rc1 版本

    Linux kernel 要发布 5.0 了.. 跟原因是 linus 认为 4.21的小版本号太多了... 邮件内容如下: https://lore.kernel.org/lkml/20190107 ...

  6. 使用kubeadm 离线安装 单master k8s 1.13

    Study From :https://www.kubernetes.org.cn/4948.html https://www.kubernetes.org.cn/4948.html 感谢原作者提供的 ...

  7. 善用Eclipse的代码模板功能

    转载自: 善用Eclipse的代码模板功能 Eclipse是个非常强大的IDE,作为一个JAVA程序员,几乎每天都与它打交道,但是它强大的功能都用到了吗? 今天让我们来看一下Eclipse中的“代码模 ...

  8. Day25-博客系统

    1. 搭建环境请参考:http://www.cnblogs.com/momo8238/p/7508677.html 2.创建3张表备用 models.py from django.db import ...

  9. GNU Emacs命令速查表

    GNU Emacs命令速查表 第一章  Emacs的基本概念 表1-1:Emacs编辑器的主模式 模式 功能 基本模式(fundamental mode) 默认模式,无特殊行为 文本模式(text m ...

  10. bzoj4807 車

    题目大意: Description 众所周知,車是中国象棋中最厉害的一子之一,它能吃到同一行或同一列中的其他棋子.車跟車显然不能在一起打 起来,于是rly一天又借来了许多许多的車在棋盘上摆了起来……他 ...