A simple example _javascript technique for realizing the animate () animation effect of jquery function by native JS

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 object's motion properties

interval, each time a change is performed, this changes the object as a property value

sp, the speed of the value transformation, so that the animation has a buffering effect, not just constant (SP 1)

FN, callback function, the behavior after the animation is done

The code is simple, just a few details to note, here to remind:

• Object properties do not have to be declared directly, so the first sentence of the function is Clearinterval (Obj.timer);

• You must add a timer for each object, otherwise it will affect each other, and a timer's common result is the timer's multiple object movement 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 effect of this sentence is to rounded the property value, because the property value has no decimal number except opacity.

• The last call to note the animation of the object, in the use of the For loop can not use the arr[i] form, especially when nested loops of the value of I 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>

The above native JS realizes the jquery function animate () The animation effect Simple example is small series to share to everybody's content, hoped can give everybody a reference, also hoped that everybody supports the cloud habitat community.