Native JS realize jquery function animate () animation effect __ Data structure

Through the internship in the company one months, slowly on the CSS and HTML is more familiar with, these days began to study JS, today with JS write a jquery animate function, tested, performance can also. Personally feel that jquery is not omnipotent, because it is a framework, so some things write more dead, like the animate function, optional parameters may not be able to achieve the results we want.
　　
The part of the annotation is used to test, the process of writing code is not very smooth, because the use of JS is not very fine, is generally know the method, but also used, but wait until the real animation function to achieve when the details of the wrong writing may be stumped.
The function has several parameters to explain,

obj, the object of the function

JSON, numeric pairs, form {attr: "value", attr: "Value"}, where you want to animate the motion properties of the object interval, each time you perform a change, this changes the object is the property value SP, the value transformation speed, so that the animation has buffering effect, Instead of just constant constant (SP 1)

FN, callback function, behavior after the animation is done

The code is simpler, but there are a few details to note here: The object's properties do not have to be declared directly, so the first sentence of the function clearinterval (Obj.timer); Each object must be added to a timer separately, otherwise it will affect each other, a timer common result is the timer of multiple object movements appearing in the card. Son data format understand that when traversing an object's animated properties, you need to icur!= Json[arr] To determine if each attribute has reached its target value. The role of flag is to prevent the Clearinterval (Obj.timer) from clearing the timer when one of the properties first reaches the target, resulting in other animated properties not reaching the target value. So if you initialize the flag value to true each time you traverse it, you will set the flag to false until all of the object's properties reach the target value, and the timer is cleared when you encounter an object that does not reach the target attribute. Speed = speed > 0? Math.ceil (Speed): Math.floor (speed); the function of this sentence is to rounded the property value, because the property value has no decimal number except for the opacity. At the end of the call attention to the object of the animation, in the use of a For loop can not use the arr[i] form, especially when the nested loop I value has become the maximum value.
JS

function animate (obj, json, interval, SP, fn) {clearinterval (Obj.timer);
    var k = 0;
    var j = 0;    function GetStyle (obj, arr) {if (Obj.currentstyle) {return Obj.currentstyle[arr]; 
        For IE} else {return document.defaultView.getComputedStyle (obj, null) [arr];
        } Obj.timer = SetInterval (function () {//j + +;
        var flag = true;
            for (Var arr in json) {var icur = 0;
            k++;
            if (arr = = "opacity") {icur = Math.Round (parsefloat (obj, getstyle)) arr);
            else {icur = parseint (GetStyle (obj, arr));
            var speed = (Json[arr]-icur) * SP; Speed = speed > 0?
            Math.ceil (Speed): Math.floor (speed);
            if (icur!= Json[arr]) {flag = false;
   } if (arr = = "opacity") {Obj.style.filter = "alpha (opacity: ' + (Icur + speed) + ')";             Obj.style.opacity = (icur + speed)/100;
            }else {Obj.style[arr] = icur + speed + "px";
        //console.log (j + "," + arr + ":" + flag);
            } if (flag) {clearinterval (Obj.timer);  
            Console.log (j + ":" + flag);
            Console.log ("k =" + K);
            Console.log ("j =" + j);
            Console.log ("Done");
            if (FN) {fn ();
}}},interval); }

Call Mode:

<script>
    var move = document.getElementById (' move '). getElementsByTagName ("Li");
    for (var i = 0; i < move.length i + +) {
        move[i].onmouseover = function () {
            var _this = this;
            Animate (_this, {width:500, height:200},10, 0.01, function () {
                animate (_this, {width:300, height:200},10, 0.01); 
  });

        }
    }

</script>

More highlights please visit: Front-End Blog