js动画--链式运动

前面几节我们只是讲述了一种运动，这节课我将讲述链式运动：就以一个动作接着一个动作完成。

对于这个实现，我们只需要改变一下就可以实现了，设置一个回调函数。

var timer;
window.onload=function(){
    var div=document.getElementById("div1");
    div.onmouseover=function(){
        startMove(div,"height",400,function(){
            //alert("aaa");
            startMove(div,"width",400,function(){
                startMove(div,"opacity",100);
            });
        });
    }
    div.onmouseout=function(){
        startMove(div,"opacity",30,function(){
            startMove(div,"width",200,function(){//我们移出div时的函数执行顺序跟移入的函数顺序是相反的。
                startMove(div,"height",200);
            });
        });
    }
}

function startMove(obj,attr,target,fn){
    clearInterval(timer);
    timer=setInterval(function(){
        var icur;
        if(attr=="opacity"){
         icur=Math.round(parseFloat(getStyle(obj,attr))*100);
         
        }else{
            icur=parseInt(getStyle(obj,attr))
            
        }
        var speed=(target-icur)/8;
         speed=speed>0? Math.ceil(speed):Math.floor(speed);
          
        if(icur==target){
            clearInterval(timer);
            if(fn){//如果设置了回调函数的话，我们就执行回调函数。
                fn();
            }
        }else{
            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)
}
 
 
 function getStyle(obj,attr){
     if(obj.currentStyle){
         return obj.currentStyle[attr];
     }else if(getComputedStyle){
         return getComputedStyle(obj,false)[attr];
     }
 }

这个改变我我们只是设置了一个回调函数来实现的。