Encapsulating animation function

function animate(element,json,fn){
    clearInterval(element.timer);
    element.timer=setInterval(function(){
        var flag=true; // By default, assume that all reach the targetfor(var attr inJson){// Check whether the attr property is opacityif(attr=="opacity"Var current=getStyle(element,attr)*100; Var target=json[attr]*100; var step=(target-current)/10; step=step>0? Math.ceil(step):Math.floor(step); current+=step; Style [attr]=current/100; }else if(attr=="zIndex"Style [attr]=json[attr]; }elseVar current=parseInt(element,attr); Var target=json[attr]; var target=json[attr]; var step=(target-current)/10; step=step>0? Math.ceil(step):Math.floor(step); current+=step; element.style[attr]=current+"px"; } // Stop as long as there is a value to the targetif(current! =target){ flag=false; }}if(flag){ clearInterval(element.timer); // This function can only be used if the user passes in the function if all attributes reach the targetif(fn){ fn(); }} // Test code: console.log("Target location :"+target+", current position :"+current+", number of steps per move :"+step); }, 20); } // Any style attribute value for any elementfunctionGetStyle (Element,attr){// Check whether the browser supports this methodreturnwindow.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]; }Copy the code