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 相关文章推荐
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
jquery tab标签页的制作
May 10 Javascript
javascript检测页面是否缩放的小例子
May 16 Javascript
JavaScript:Div层拖动效果实例代码
Aug 06 Javascript
Table冻结表头示例代码
Aug 20 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
Nov 17 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 Javascript
jQuery插件支持同一页面被多次调用
Feb 14 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
vue实现键盘输入支付密码功能
Aug 18 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(视频)Http下载
2006/12/12 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
codeigniter中测试通过的分页类示例
2014/04/17 PHP
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
JavaScript中的Location地址对象
2008/01/16 Javascript
JS图片自动轮换效果实现思路附截图
2014/04/30 Javascript
javascript合并表格单元格实例代码
2016/01/03 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
python Selenium 库的使用技巧
2020/10/16 Python
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
热能动力工程毕业生自荐信
2013/11/07 职场文书
初中数学教学反思
2014/01/16 职场文书
企业文化建设实施方案
2014/03/22 职场文书
导师推荐信范文
2014/05/09 职场文书
小组名称和口号
2014/06/09 职场文书
党的群众路线对照检查材料思想汇报
2014/09/25 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
爱国主义主题班会
2015/08/14 职场文书
nginx之queue的具体使用
2022/06/28 Servers