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源码吧,与先前的版本差别挺大的,所以用了最新的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!你应该有个大致的轮廓了,让我详细讲解下参数的意义吧~~
属性 | 类型 | 值 |
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://www.css119.com/archives/1640
http://cdmckay.org/blog/2010/03/01/the-jquery-animate-step-callback-function/
jQuery中Animate进阶用法(二)的更多相关文章
- jQuery中Animate进阶用法(一)
jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...
- jQuery中Animate进阶用法(三)
progressType: Function( Promise animation, Number progress, Number remainingMs )每一步动画完成后调用的一个函数,无论动画 ...
- jQuery中animate()方法用法实例
本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. ani ...
- jQuery中eq()方法用法实例
本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...
- jQuery中attr()方法用法实例
本文实例讲述了jQuery中attr()方法用法.分享给大家供大家参考.具体分析如下: 此方法设置或返回匹配元素的属性值. attr()方法根据参数的不同,功能也不同. 语法结构一: 获取第一个匹配元 ...
- jQuery中$.each的用法
jQuery中$.each的用法 本文导读:jQuery中each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象.数组的属性值并进行处理.jQuery提供的each方法 ...
- jQuery中on()方法用法实例详解
这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下 本 ...
- jQuery中index()方法用法实例
本文实例讲述了jQuery中index()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以搜索匹配元素,并返回元素的索引值.索引值是从0开始的. 语法结构一: 当此方法没有参数的时候,返回值 ...
- jQuery中on()方法用法实例
这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能.定义及在匹配元素上绑定一个或者多个事件处理函数的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中on()方法 ...
随机推荐
- PHP学习 类型 变量 常数 运算符
PHP支持下列8种类型 标量类型 scalar type整数 integer浮点数 float double布尔 boolean字符串 string 特殊类型 special typeNULL资源 r ...
- 2-Eighteenth Scrum Meeting-20151218
任务安排 成员 今日完成 明日任务 闫昊 写完学习进度记录的数据库操作 写完学习进度记录的数据库操作 唐彬 编写与服务器交互的代码 和服务器老师交流讨论区后台接口 史烨轩 获取视频url 尝试使用 ...
- IOS的开发演变历史
对IOS开发平台一直抱有很大兴趣,正好通过这个机会好好了解一下IOS的开发历程! 通过一些查阅,我了解到IOS的开发平台主要是依靠Xcode软件来编写程序,同时又需要在MAC OS X的环境下运行,w ...
- C语言入门:02.第一个C语言程序
一.开发工具的选择(1)可以用来写代码的工具:记事本.UltraEdit.Vim.Xcode等(2)选择Xcode的原因:苹果官方提供的开发利器.简化开发过程.有高亮显示功能 (3)使用Xcode新建 ...
- Linux kernel 发布 5.0-rc1 版本
Linux kernel 要发布 5.0 了.. 跟原因是 linus 认为 4.21的小版本号太多了... 邮件内容如下: https://lore.kernel.org/lkml/20190107 ...
- 使用kubeadm 离线安装 单master k8s 1.13
Study From :https://www.kubernetes.org.cn/4948.html https://www.kubernetes.org.cn/4948.html 感谢原作者提供的 ...
- 善用Eclipse的代码模板功能
转载自: 善用Eclipse的代码模板功能 Eclipse是个非常强大的IDE,作为一个JAVA程序员,几乎每天都与它打交道,但是它强大的功能都用到了吗? 今天让我们来看一下Eclipse中的“代码模 ...
- Day25-博客系统
1. 搭建环境请参考:http://www.cnblogs.com/momo8238/p/7508677.html 2.创建3张表备用 models.py from django.db import ...
- GNU Emacs命令速查表
GNU Emacs命令速查表 第一章 Emacs的基本概念 表1-1:Emacs编辑器的主模式 模式 功能 基本模式(fundamental mode) 默认模式,无特殊行为 文本模式(text m ...
- bzoj4807 車
题目大意: Description 众所周知,車是中国象棋中最厉害的一子之一,它能吃到同一行或同一列中的其他棋子.車跟車显然不能在一起打 起来,于是rly一天又借来了许多许多的車在棋盘上摆了起来……他 ...