<! DOCTYPE html>#box {width:100px; height:100px; Background-Color:greenyellow; Position:absolute; } </style>varBTN = document.getElementById ("btn"); Btn.onclick=function() {Animate (box, {"Height": "width": Borderradius, "left": "Max", "Top": 100},function() {Animate (box, {"Height": $, "width": Borderradius, "left": $, "Top": 50},function() {Animate (box, {"Height": +, "width": $, "Borderradius": +, "left": +, "top": 400}) }) }) } functionAnimate (obj, JSON, fn) {clearinterval (Obj.timer); Obj.timer= SetInterval (function () { varIsTrue =true; for(varKinchJSON) {//{K:json[k]} varLeader = parseint (GetAttr (obj, k)) | | 0;//if it is Nan, give a default value varStep = (Json[k]-Leader)/10; Step= step > 0? Math.ceil (STEP): Math.floor (step);//make a judgment, when the step>0, the upward rounding, guaranteed at least one; <0, down rounding, guaranteed at least 1Leader = leader +step; OBJ.STYLE[K]= leader + "px"; Console.log ("The code is still executing."); if(Leader! =Json[k]) {IsTrue=false; } } if(isTrue) {clearinterval (Obj.timer); if(FN) {fn (); } } }, 15); } functiongetAttr (demo, attr) {if(window.getComputedStyle) {returnwindow.getComputedStyle (Demo,NULL) [attr]; } Else { returnDemo.currentstyle[attr]; } }</script></body>Use native JavaScript to encapsulate animation functions (with callback functionality)