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 相关文章推荐
showModalDialog 和 showModelessDialog
Jan 22 Javascript
javascript web对话框与弹出窗口
Feb 22 Javascript
js判断一个元素是否为另一个元素的子元素的代码
Mar 21 Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 Javascript
第六章之辅组类与响应式工具
Apr 25 Javascript
vue-cli项目无法用本机IP访问的解决方法
Sep 20 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 Javascript
node.JS二进制操作模块buffer对象使用方法详解
Feb 06 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 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
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
PHP函数引用返回的实例详解
2016/09/11 PHP
PHP获取当前日期及本周一是几月几号的方法
2017/03/28 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
jquery实现瀑布流效果分享
2014/03/26 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
vue的状态管理模式vuex
2017/11/30 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
wxPython中文教程入门实例
2014/06/09 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
numpy中索引和切片详解
2017/12/15 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
Python3实现二叉树的最大深度
2019/09/30 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
高三学习决心书
2014/03/11 职场文书
家长会主持词
2014/03/26 职场文书
主题班会演讲稿
2014/05/22 职场文书
国际贸易毕业生自荐书
2014/06/22 职场文书
树转促学习心得体会
2014/09/10 职场文书
先进典型发言材料
2014/12/30 职场文书
男方婚礼答谢词
2015/01/20 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书
SQL SERVER中的流程控制语句
2022/05/25 SQL Server