jQuery Animation实现CSS3动画
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()方法产生的节奏来实现动画。以此类推,我们就可以实现很多效果了。具体例子请参考这里
参考文档
如需转载,请注明来自: BorisHuai前端修炼 > jQuery Animation实现CSS3动画
jQuery Animation实现CSS3动画的更多相关文章
- transform animation transition css3动画
transform 定义 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. 值 应用 如果transform与transition联合起 ...
- css3动画和jquery动画使用中要注意的问题
前一阵子写demo的时候遇到这样一个问题,就是给元素添加css3或者jquery动画时,在动画结束前不能准确取到元素的css属性. 1. css3动画讨论 先看代码: html: <div id ...
- css3 动画(animation)-简单入门
css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...
- CSS3动画animation认识,animate.css的使用
CSS动画 可以取代js动画 在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! -------------------------------------------- ...
- 使用jquery封装的动画脚本(无动画、css3动画、js动画)
自己封装好的showhide.js 包含无动画.css3动画.js动画 包括:fade(淡入淡出) slideUpDown(上下滑动) slideLeftRight(左右滑动) fadeSlid ...
- 学习CSS3动画(animation)
CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...
- jquery实现css3动画
jquery animate改变元素样式时,只支持数字值的变化,比如width,height等,但是css3属性状态值很多都不是数字值,而是字符串和数字混合在一起,比如translate(), rot ...
- CSS3动画属性animation的用法
转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...
- CSS3 动画animation
关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中 ...
随机推荐
- 纯javascript联动的例子
有人想要学习下纯javascript联动的一些技巧,我这里就以日期的联动为例,附上一些代码至于复杂的省市区联动,不建议用纯javascript的,而是用ajax的方式,该不在此讨论范围内,想要了解aj ...
- jQuery获取Select选择的Text和 Value
jQuery获取Select选择的Text和Value:语法解释:1. $("#select_id").change(function(){//code...}); //为Se ...
- frameset标签代码实现网站跳转
js代码1: document.writeln("<frameset rows=\"0, *\">"); document.writeln(&quo ...
- PHP页面静态化入门
<?php /** *PHP页面静态化分为以下步骤: *1.打开输出控制缓存 *2.返回输出缓存区的内容 *3.将一个字符串写入文件 *4.冲刷出缓存区的内容 */ //1.打开输出控制缓存 o ...
- Attributes(2): Displaying attributes for a class.(显示类属性)
输出类属性 using System; using System.Reflection; namespace Attribute02 { //用于Class和Struct类型 [Attribu ...
- 结合使用 Oracle Database 11g 和 Python
结合使用 Oracle Database 11g 和 Python 本教程介绍如何结合使用 Python 和 Oracle Database 11g. 所需时间 大约 1 个小时 概述 Python ...
- DATE 使用
DATE 使用 标签(空格分隔): SHELL 使用shell处理文本时经常要使用date,但各种参数经常忘,记录在此: #date 获取当前时间 #date -d "-1 week&quo ...
- 用gtest实现数据驱动的单元测试
//使用gtest进行数据驱动的单元测试 #include <gtest/gtest.h> #include <iostream> #include <vector> ...
- html5中的常用的库
JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera ...
- python ^M 产生的原因 及 lxml 如何获取text的原因
其实跟踪一下会发现,^M 是由于 /r/n 所造成的. article = dom_c.xpath('//td[@id="article_content"]//text()')co ...