当前位置:Gxlcms > JavaScript > JS实现jQuery的animate()动画

JS实现jQuery的animate()动画

时间:2021-07-01 10:21:17 帮助过:5人阅读

本文主要介绍了浅谈原生JS实现jQuery的animate()动画示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

参数介绍:

obj
执行动画的元素
cssJSON数值对,形式为“{属性名: 属性值}",指要执行动画的书序及其对应值
interval
属性每执行一次改变的时间间隔
speedFactor速度因子,使动画具有缓冲效果,而不是匀速不变(speedFactor为1)
func执行完动画后的回调函数

注意:

必须为每一个元素分别添加一个定时器,否则会互相影响。

cur != css[arr]判断是否每一个属性已经达到目标值。只有所有属性都达到目标值,才会清除定时器,flag的作用是防止某个属性第一个达到目标值但还有其他属性没有达到目标值的情况下清除定时器。因此,在每次改变前初始化flag为true,只要遇到一个没有达到目标的属性,就将flag置为false,直至所有属性达到目标值才清除定时器。

属性值opacity的值有小数,所以需要特殊处理: Math.ceil(speed)和Math.floor(speed)以及* 100和 / 100操作。


相关推荐:

Jquery的animate()反应过慢的问题解决

深入理解jquery自定义动画animate()

jQuery中animate()方法用法实例_jquery

以上就是JS实现jQuery的animate()动画的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行