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);    
    }