JS 之完美运动框架 如何同时改变元素多个属性？

　　正如改变一个属性的方法，可以使用已经写好的运动函数如move(obj,attr,target,fn);我们可能会想这样做，

　　调用两次运动函数，如同时改变宽和高，move(obj,'width',target,fn)；move(obj,'height',target,fn)；但是结果发现，只有高度改变，或是只有宽度改变，

　　其实原因是，每个函数里不是有定时器吗，在开始执行之前，就自动清除了一次定时器，所以执行改变第一个属性的move函数，实质上并未执行直接执行了第二个move函数，

　　所以，这样写的结果就是，改变哪个属性的函数排在后面，哪个属性就得到了改变，而并未真正达到同时改变多个属性的效果。

　设置一个标志性的开关，如下面的bStop，即可实现分阶段完成任务

　　

window.onload=function(){
        var oDiv=document.getElementsByTagName('div')[0];
        oDiv.onmouseover=function(){
            move(this,{width:102,height:200,opacity:100});
        }
    }
    function getStyle(obj,attr){
        if (obj.currentStyle) {
            return currentStyle(obj)[attr];
        }else{
            return getComputedStyle(obj,false)[attr];
        }
    }
    function move(obj,json,fn){
            obj.timer=setInterval(function(){
                var bStop=true;//表示这一次运动结束时所有值都到达目标点
                for (var attr in json){

                    //1,获取当前
                    var iCur=0;
                    if (attr == 'opacity') {
                        iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
                    }else{
                        iCur=parseInt(getStyle(obj,attr));
                    }
                    //2,计算速度
                    var speed=(json[attr]-iCur)/8;
                    speed=speed>0?Math.ceil(speed):Math.floor(speed);
                    //3,检测停止
                    if (iCur != json[attr]) {
                        bStop=false;
                    }
                    if (attr == 'opacity') {
                        obj.style.opacity=(iCur+speed)/100;
                    }else{
                        obj.style[attr]=iCur+speed+'px';
                    }    
                    
                }
                if (bStop) {
                        clearInterval(obj.timer);
                        fn&&fn();
                    }
            },30);    
    }