变速动画函数封装增加任意多个属性、透明度和层级

//计算后的样式属性---- 一个元素的任意的一个样式属性值function getStyle(element,attr) {    //判断这个浏览器是否支持这个方法    return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];}//匀速动画function animate(element,json,fn) {  //element--元素   attr--属性名字   target--目标位置    //清理定时器    clearInterval(element.timeId);    element.timeId=setInterval(function () {        var flag=true;//默认，假设，全部到达目标        for(var attr in json){            //判断这个属性中attr中是不是opacity            if (attr=="opacity"){                //获取元素的当前的透明度，当前的透明度放大100倍                var current=getStyle(element,attr)*100;                //目标的透明度放大100倍                var target=json[attr]*100;                var step=(target-current)/10;                step=step>0?Math.ceil(step):Math.floor(step);                current+=step;                element.style[attr]=current/100;            }else if(attr=="zIndex"){   //判断这个属性attr中是不是zIndex                //层级改变就是直接改变这个属性的值                element.style[attr]=json[attr];            }else {                //获取元素当前位置                var current=parseInt(getStyle(element,attr));//数字类型                //当前的属性对应的目标值                var target=json[attr];                //移动的步数                var step=(target-current)/10;                step=step>0?Math.ceil(step):Math.floor(step);                current+=step;                element.style[attr]=current+"px";            }            //判断是否到达目标            if(current!=target){                flag=false;            }        }        if(flag){            //清理计时器            clearInterval(element.timeId);            //回调函数,所有属性达到目标后才能使用            if(fn){                fn();            }        }

原文地址：https://www.cnblogs.com/lujieting/p/10055298.html