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 String 的扩展方法集合
Jun 01 Javascript
JavaScript prototype对象的属性说明
Mar 13 Javascript
理解Javascript_13_执行模型详解
Oct 20 Javascript
jQuery中hover与mouseover和mouseout的区别分析
Dec 24 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
Vue.js中用v-bind绑定class的注意事项
Dec 13 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 Javascript
浅谈Vue.js中的v-on(事件处理)
Sep 05 Javascript
layer.alert自定义关闭回调事件的方法
Sep 27 Javascript
Javascript设计模式之原型模式详细
Oct 05 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读取数据库信息的几种方法
2008/05/24 PHP
php 模拟POST|GET操作实现代码
2010/07/20 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
php实现登陆模块功能示例
2016/10/20 PHP
php中的异常和错误浅析
2017/05/03 PHP
jquery中event对象属性与方法小结
2013/12/18 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
javascript实现微信分享
2014/12/23 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
python fabric实现远程操作和部署示例
2014/03/25 Python
python判断字符串是否包含子字符串的方法
2015/03/24 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
Python中的TCP socket写法示例
2018/05/11 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
python RSA加密的示例
2020/12/09 Python
会计应聘求职信范文
2013/12/17 职场文书
车间组长岗位职责
2013/12/20 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
高中学生期末评语
2014/04/25 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
被告答辩状范文
2015/05/22 职场文书
二婚主持词
2015/06/30 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python
swagger如何返回map字段注释
2021/07/03 Java/Android