jquery animate step实现css3属性动画

作者:袖梨 2022-06-25


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这个关键参数的用法,可看下面的相关注释,网上的介绍几乎没有,纯属个人见解:

相关文章

精彩推荐