Js animation 3 perfect framework

Js animation 3 perfect framework
Js framework:

Function getStyle (obj, attr) {if (obj. currentStyle) {return obj. currentStyle [attr];} else {return getComputedStyle (obj, false) [attr];} function startMove (obj, json, fn) {var flag = true; // assume clearInterval (obj. timer); obj. timer = setInterval (function () {for (var attr in json) {// obtain the current value var icur = 0; if (attr = 'opacity ') {icur = Math. round (parseFloat (getStyle (obj, attr) * 100);} else {icur = parseInt (getStyle (obj, attr ))}// Calculation speed var speed = (json [attr]-icur)/8; speed = speed> 0? Math. ceil (speed): Math. floor (speed); // checks to stop if (icur! = Json [attr]) {flag = false;} if (attr = 'opacity ') {obj. style. filter = 'Alpha (opacity: '+ (icur + speed) +') '; obj. style. opacity = (icur + speed)/100;} else {obj. style [attr] = icur + speed + 'px ';} if (flag) {clearInterval (obj. timer); if (fn) {fn () ;}}, 30 )}

Chained animation (the previous action is completed, and the next action continues ):

 

<Script src = move. js> </script> <script> window. onload = function () {var li = document. getElementById ('li1'); li. onmouseover = function () {startMove (li, 'width', 400, function () {startMove (li, 'height', 200, function () {startMove (li, 'opacity ', 100) ;}) ;}} li. onmouseout = function () {startMove (li, 'opacity ', 30, function () {startMove (li, 'height', 100, function () {startMove (li, 'width', 200) ;}) ;}}</script>

•  

 

Simultaneous animation (multiple actions are completed at the same time ):

 

 

<Script src = move. js> </script> <script> window. onload = function () {var oli = document. getElementById ('li1'); oli. onmouseover = function () {startMove (oli, {width: 400, height: 200, opacity: 100});} oli. onmouseout = function () {startMove (oli, {width: 200, height: 100, opacity: 30}) ;}</script>

•  
•  
•