JavaScript "Perfect Motion frame"

/*the "Perfect motion frame", the so-called "perfect", is a motion function move () that can achieve multiple parameters, and the movement of multiple objects does not affect each other. * The approximate structure is as follows: Motion frame Exp:move (obj,{width:200,height:200},fnend) * obj: Moving object * JSON: A JSON collection of motion properties and moving target values {' Width ': 2 XX, ' height ': $} * SV: Movement speed, speed-value, the smaller the value the greater the speed * Fnend: callback function after the end of the movement*/functionMove (obj, JSON, SV, fnend) {//take CSS style values    functionGetStyle (obj, attr) {if(obj.currentstyle) {returnObj.currentstyle[attr]; } Else {                returngetComputedStyle (obj,false) [attr]; }        }        //movement beginsclearinterval (Obj.timer); Obj.timer= SetInterval (function() {        varisallcompleted =true;//Assuming all the movement is complete.         for(attrinchJSON) {            varAttrValue = 0; Switch(attr) { Case' Opacity ': AttrValue= Math.Round (parsefloat (GetStyle (obj, attr)) * 100);  Break; default: AttrValue=parseint (GetStyle (obj, attr)); }            //4 If no SV is passed in            varSpeed = (json[attr]-attrValue)/(SV | | 4); speed= Speed > 0?Math.ceil (Speed): Math.floor (speed); //If there is an unfinished movement in the loop, the isallcompleted is False            if(AttrValue! = json[attr]) isallcompleted =false; Switch(attr) { Case' Opacity ': {obj.style.filter= "Alpha (opacity=" + (AttrValue + speed) + ")"; Obj.style.opacity= (AttrValue + speed)/100;                    };  Break; default: obj.style[attr]= AttrValue + speed + ' px '; }        } //For in end!        //after all loops are completed, the timer is only turned off when all movements have ended (isallcompleted=true)        if(isallcompleted) {clearinterval (Obj.timer); if(Fnend) fnend (); }    }, 30);} //move () end!

From

JavaScript "Perfect Motion frame"