JavaScript封装任意方向，任意属性，多属性同时运动的运动函数

/*
调用方式：animate(运动元素，运动属性，回调函数)
运动属性为一个对象，调用示例如下：
animate(box,{
        width:200,
        height:200,
        opacity:0.5,
        left:200
    },function(){console.log('所有属性运动完成');});*/
function animate(dom,attr_obj,callback){
    for(var attr in attr_obj){
        //首先整理属性对象
        //将对象整理成下面的形式
        // attr_obj = {
        //     width:{
        //         'current':200,
        //         'target':200
        //     },
        //     height:{
        //         'current':200,
        //         'target':200
        //     },
        //     opacity:{
        //         'current':1,
        //         'target':0.5
        //     }
        // }
        if(attr === 'opacity'){
           var current = parseInt(getComputedStyle(dom,false)[attr]*100);
           var target = attr_obj[attr]*100;
        }else if(attr.indexOf('scroll') !== -1){
           var current = dom[attr];
           var target = attr_obj[attr];
        }else{
            var current = parseInt(getComputedStyle(dom,false)[attr]);
            var target = attr_obj[attr];
        }
        attr_obj[attr] = {
            
            'current':current,
            'target':target
        }
    }
    //清除计时器，防止多次点击产生多个计时器
    clearInterval(dom.timer);

    dom.timer = setInterval(function(){
        for(var attr in attr_obj){
            //保存current和target，下面用起来更方便
            var current = attr_obj[attr].current;
            var target = attr_obj[attr].target;
            //确定运动
            var speed = (target - current)/10;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            //判断剩余运动量是否小于最小运动量
            if(Math.abs(target - current) <= Math.abs(speed)){
                if(attr === 'opacity'){
                    dom.style[attr] = target /100;
                }else if(attr.indexOf('scroll') != -1 ){
                    dom[attr] = target;
                }else{
                    dom.style[attr] = target + 'px';
                }
                //某一项运动属性运动完成就从对象中删除
                delete attr_obj[attr];
                // 查看对象中是否还有属性，有的话就会返回重新进入计时器，开始下一个属性的运动，
                // 如果所有属性都运动完成，那么对象中就没有元素了。就不会进入循环，继续执行后
                // 面的代码，清除计时器
                for(var o in attr_obj){
                    return;
                }
                //
                clearInterval(dom.timer);

                // 判断是否传入回调函数，如果传入就执行，如果没有传入就什么都不做
                typeof callback === 'function' ? callback() : '';
                
            }else{
                attr_obj[attr].current += speed;
                if(attr === 'opacity'){
                    dom.style[attr] = attr_obj[attr].current/100;
                }else if(attr.indexOf('scroll') != -1){
                    dom[attr] = attr_obj[attr].current;
                }else{
                    dom.style[attr] = attr_obj[attr].current + 'px'
                }
                
            }
        }
    },20)
}

喜欢的给个关注吧！