Simple example of how native js implements the animation effect of the jquery function animate ()

The following is a simple example of how native js implements the animation effect of the jquery function animate. I think this is quite good. Now I will share it with you and give you a reference. Let's take a look at the small Editor. Through a one-month internship at the company, we gradually become familiar with css and html. Over the past few days, we have started to study js, today, I wrote a jquery animate function in js. I tested it and the performance was good. I personally think jquery is not omnipotent, because it is a framework, so some things are hard to write, just like the animate function, there are not many optional parameters, and sometimes they may not achieve the desired effect.

The comments are used for testing and the code writing process is not very smooth, because js is usually not very detailed, and they are generally known and used, however, when an animation function is to be implemented, it may be difficult to write a mistake in detail.

There are several parameters in the function to explain,

• Obj: the object of the function.

• Json, value pair, in the form of {attr: "value", attr: "value"}, where it refers to the motion attribute of the animation object

• Interval: The interval between every change executed. Here, the object is changed to the attribute value.

• Sp: the speed at which the value is changed, so that the animation has a buffer effect, not just a constant speed (sp is 1)

• Fn, callback function, after the animation is executed

The code is relatively simple, but you need to pay attention to the following details:

• Object Attributes do not need to be directly declared, so the first clearInterval (obj. timer) of the function will not report an error.

• A timer MUST be added for each object. Otherwise, the timer will affect each other. The common result of a timer is that the movement of multiple objects in the timer is choppy.

• Son Data Format: icur is required to traverse the animation attributes of an object! = Json [arr] determines whether each attribute has reached the target value. Flag is used to prevent the timer from being cleared by clearInterval (obj. timer) after the first attribute reaches the target value. Therefore, the flag value is initialized to true during each traversal. If an object fails to reach the target attribute, the flag is set to false until all attributes of the object reach the target value and the timer is cleared.

• Speed = speed> 0? Math. ceil (speed): Math. floor (speed );

This clause is used to integer the attribute value because the attribute value has no decimal places except opacity.

• Pay Attention to the animation objects during the final call. arr [I] format cannot be used at will when the for loop is used, especially when the nested loop is used, the I value has changed to 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 = Ma Th. round (parseFloat (getStyle (obj, arr) * 100);} 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 method:

《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 simple example of the above native js implementation of the jquery function animate () animation effect is all the content shared by xiaobian. I hope to give you a reference and support for PHP.

For more articles about simple examples of native js implementation of the jquery function animate () animation effect, refer to PHP!