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

获取任意一个元素的任意一个属性的当前的值---当前属性的位置值

function getStyle(element, attr) {
        return window.getComputedStyle ? window.getComputedStyle(element, null)[attr]
            : element.currentStyle[attr] || 0;
    }

function animate(element,json,fn){
    clearInterval(element.timeId);
    element.setInterval(function(){
        var flag=true;
        for (var attr in json){
            if (attr=="opacity"){
                var current=getStyle(element,attr)*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"){
                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();
                }
            }
},20);
}

测试代码

my$("btn1").onclick = function () {
        var json1 = {"width": 400, "height": 500, "top": 80, "left": 500, "opacity": 0.2};
        animate(my$("dv"), json1, function () {
            var json2 = {"width": 500, "height": 500, "top": 0, "left": 0, "opacity": 0.8, "zIndex": 1000};
            animate(my$("dv"), json2);
        });
    };