js--同步運動json下

這一節針對上一節講述的bug，咱們來處理一下。

這個bug存在的緣由就是，一旦只要有一個屬性值達到目標值就會清除定時器，因此咱們要改變 的就是清除定時器的那麼部分。看下面的修改

var timer;
window.onload=function(){
    var div=document.getElementById("div1");
     div.onmouseover=function(){
         startMove(div,{width:210,height:400,opacity:100});
     }
     div.onmouseout=function(){
         startMove(div,{width:200,height:200,opacity:30})
     }
}

function startMove(obj,json,fn){
    clearInterval(timer);
    var index=0;
    timer=setInterval(function(){
        for(var attr in json){
        var icur;
        if(attr=="opacity"){
         icur=Math.round(parseFloat(getStyle(obj,attr))*100);
         
        }else{
            icur=parseInt(getStyle(obj,attr))
            
        }
        var speed=(json[attr]-icur)/8;
         speed=speed>0? Math.ceil(speed):Math.floor(speed);
          
        if(icur!=json[attr]){
            index=1;//當只要還有屬性值不等於他的目標值時，index=0，這時就不清除掉定時器。
            if(fn){
                fn();
            }
        }else {
            index=0;
        }
            
        if(index==1){
            if(attr=="opacity"){
                obj.style.opacity=(icur+speed)/100;
                obj.style.filter="alpha(opacity"+(icur+speed)+")";
            }
                obj.style[attr]=parseInt(getStyle(obj,attr))+speed+"px";    
        }
        }
    },50)
    if(index=0){
        clearInterval(timer);
    }
}
 
 
 function getStyle(obj,attr){
     if(obj.currentStyle){
         return obj.currentStyle[attr];
     }else if(getComputedStyle){
         return getComputedStyle(obj,false)[attr];
     }
 }