封装动画函数

function animate(element,json,fn){
    clearInterval(element.timer);
    element.timer=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;
                //缩小100倍
                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.timer);
            //所有属性到达目标才能使用这个函数,前提是用户传入了这个函数 
            if(fn){
                fn();
            }
        }

        //测试代码:
        console.log("目标位置:"+target+",当前位置:"+current+",每次移动步数:"+step);
    },20);
}


//任意一个元素的任意一个样式属性值
function getStyle(element,attr){
    //判断浏览器是否支持这个方法
    return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
}