//change any numeric attribute of any object to any target value functionAnimate (obj, JSON, fn) {clearinterval (Obj.timer); Obj.timer= SetInterval (function () { varFlag =true; for(varKinchJSON) { if(k = = = "Opacity") {//opacity to special treatment //opacity No unit participation arithmetic is automatically converted to numeric values so no parsetint //Value range 0-1 0.1 0.33 33 to increase the previous formula to be 100 times times more effective varLeader = GetStyle (obj, k) * 100; vartarget = json[k] * 100; varStep = (Target-leader)/10; Step= step > 0?Math.ceil (STEP): Math.floor (step); Leader= leader +step; OBJ.STYLE[K]= leader/100;//Opacity No units}Else if(k = = = "ZIndex")) {Obj.style.zIndex= Json[k];//hierarchy does not require a gradient direct setting}Else { varLeader = parseint (GetStyle (obj, k)) | | 0; vartarget =Json[k]; varStep = (Target-leader)/10; Step= step > 0?Math.ceil (STEP): Math.floor (step); Leader= leader +step; OBJ.STYLE[K]= leader + "px"; } if(Leader! =target) {Flag=false; } } if(flag) {clearinterval (Obj.timer); if(FN) {fn (); } } }, 15); } //all properties reach target value to clear functionGetStyle (obj, attr) {if(window.getComputedStyle) {returnwindow.getComputedStyle (obj,NULL) [attr]; } Else { returnObj.currentstyle[attr]; } }
JavaScript animation function Encapsulation (upgraded version)