jQuery Animation实现CSS3动画示例介绍


Posted in Javascript onAugust 14, 2013

jQuery Animation的工作原理是通过将元素的CSS样式从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")。详细用法请参考jQuery 效果 - animate()方法和官方教程。

像CSS3好多效果因为不是数值的,所以是没有办法直接通过animate()方法实现的。如translate(), rotate(), scale(), skew(), matrix(), rotateX(), rotateY()等方法,这些方法的一个特点就是它们的值是字符和数字混合在一起的。因此我们是不可以直接用animate()方法来动态地修改它们的值来实现动画的效果。

如果我们自己用JavaScript实现CSS3动画,那么我们只能自已通过setInterval()方法来实现,实现起来比较复杂。其实animate()方法就是基于setInterval()方法进行工作的,但是可以用方便的设置动画速度,还可以设置是匀速还是变速。animate()方法的第二种用法有个step参数规定动画的每一步要执行的函数。我们可以用使用一个不影响元素效果显著的CSS值来触发animate()方法,然后在step回调函数中修改我们想要修改的值,这样就可以间接地实现动画了。请看transform例子:

<div id="box"></div>
#box { 
width:100px; 
height:100px; 
position:absolute; 
top:100px; 
left:100px; 
text-indent: 90px; 
background-color:red; 
} $('#box').animate({ textIndent: 0 }, { 
step: function(now,fx) { 
$(this).css('-webkit-transform','rotate('+now+'deg)'); 
}, 
duration:'slow' 
},'linear');

这里使用text-indent属性来触发动画,是因为我们这里没有文字,所以使用text-indent而不会影响到元素的样式效果,这里也可以用font-size等。然后使用animate()方法产生的节奏来实现动画。以此类推,我们就可以实现很多效果了。具体例子请参考这里

参考文档
•jQuery 效果 - animate() 方法
•.animate()

Javascript 相关文章推荐
用于判断用户注册时,密码强度的JS代码
Jan 01 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
js检测网络是否具体连接功能的代码
May 23 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 Javascript
微信小程序 绘图之饼图实现
Oct 24 Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
Aug 25 Javascript
JavaScript中json使用自己总结
Aug 13 #Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 #Javascript
Jquery动态进行图片缩略的原理及实现
Aug 13 #Javascript
javascript中RegExp保留小数点后几位数的方法分享
Aug 13 #Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 #Javascript
jquery二级导航内容均分的原理及实现
Aug 13 #Javascript
模拟多级复选框效果的jquery代码
Aug 13 #Javascript
You might like
在PHP中使用灵巧的体系结构
2006/10/09 PHP
推荐一篇入门级的Class文章
2007/03/19 PHP
PHP 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
php编写一个简单的路由类
2011/04/13 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
python实现在windows服务中新建进程的方法
2015/06/30 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
Python API自动化框架总结
2019/11/12 Python
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
小学生暑假感言
2014/02/06 职场文书
代理协议书范本
2014/04/22 职场文书
需求分析说明书
2014/05/09 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
未婚证明格式
2015/06/15 职场文书