浅谈原生JS实现jQuery的animate()动画示例

前端之家收集整理的这篇文章主要介绍了浅谈原生JS实现jQuery的animate()动画示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文介绍了浅谈原生JS实现jQuery的animate()动画示例,希望此文章对各位有所帮助。

参数介绍:

属性名: 属性值}",指要执行动画的书序及其对应值 属性每执行一次改变的时间间隔 效果,而不是匀速不变(speedFactor为1)函数

注意:

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

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

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

0 ? Math.ceil(speed): Math.floor(speed); if (cur != css[prop]) flag = false; if (prop == "opacity") { obj.style.filter = "alpha(opacity : '+(cur + speed)+' )"; obj.style.opacity = (cur + speed) / 100; } else obj.style[prop] = cur + speed + "px"; } if (flag) { clearInterval(obj.timer); if (func) func(); } },interval); } var li = document.getElementsByTagName("li"); for(var i = 0; i < li.length; i ++){ li[i].onmouSEOver = function(){ animate(this,{width: 100,opacity: 0.5},10,0.01,function(){ alert("Finished!"); }); } }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的jQuery相关文章