最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jquery animate step实现css3属性动画
时间：2015-07-22 编辑：简简单单 来源：一聚教程网
jquery animation的工作原理是通过将元素的css样式从一个状态改变为另一个状态。css属性值是逐渐改变的，这样就可以创建动画效果。
但是animate方法下，只有数字值可创建动画（比如 “top:30px”），字符串值类型的值则是无法创建动画（比如 “background-color:red”）。而工作中我们遇到的更多是想通过jquery animate来控制 css3属性，而css3好多效果因为不是数值的，所以是没有办法直接通过animate()开发方法 实现的。如translate(), rotate(), scale(), skew(),等开发方法 ，这些开发方法 的一个特点就是它们的值是字符和数字混合在一起，如：rotate(360deg);
还好animate()方法有个stp参数规定动画执行的每一步都要执行step这个回调函数。我们可以用使用一个不影响元素效果显著的css值来触发animate()开发方法 ，然后在step回调函数中修改我们想要修改的值，这样就可以间接地实现动画了，实例：
jquery animate控制 css3属性
运行可看到动画效果，对于step这个关键参数的用法，可看下面的相关注释，网上的介绍几乎没有，纯属个人见解：
相关文章
- jQuery+CSS3实现点赞功能 06-25
- jquery中animate和CSS3实现缓动追逐示例 03-25
- 解决jQuery/CSS3 transition与动画冲突 02-08
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31