JS implements jQuery's animate() animation

This article mainly introduces the animate() animation example of jQuery implemented in native JS. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Parameter introduction:

obj	Elements to perform animation
css	JSON value pair, in the form of "{attribute name: attribute value}", refers to the book sequence to be animated and its corresponding value
interval	The time interval for each property change
speedFactor	The speed factor makes the animation have a buffering effect , instead of constant speed (speedFactor is 1)
func	Callback function after executing the animation

Note:

A timer must be added to each element, otherwise it will affect each other.

cur != css[arr] Determine whether each attribute has reached the target value. The timer will be cleared only when all attributes reach the target value. The function of the flag is to prevent the timer from being cleared when a certain attribute is the first to reach the target value but there are other attributes that have not reached the target value. Therefore, initialize the flag to true before each change. As soon as you encounter an attribute that does not reach the target, set the flag to false. The timer will not be cleared until all attributes reach the target value.

The value of the attribute value opacity has decimals, so special processing is required: Math.ceil(speed) and Math.floor(speed) as well as * 100 and / 100 operations.

function animate(obj, css, interval, speedFactor, func) { 
  clearInterval(obj.timer); 
  function getCss(obj, prop) { 
    if (obj.currentStyle) 
      return obj.currentStyle[prop]; // ie 
    else  
      return document.defaultView.getComputedStyle(obj, null)[prop]; // 非ie 
  } 
  obj.timer = setInterval(function(){ 
    var flag = true; 
    for (var prop in css) { 
      var cur = 0; 
      if(prop == "opacity")  
        cur = Math.round(parseFloat(getStyle(obj, prop)) * 100); 
      else  
        cur = parseInt(getStyle(obj, prop)); 
      var speed = (css[prop] - cur) * speedFactor; 
      speed = speed > 0 ? Math.ceil(speed): Math.floor(speed); 
      if (cur != css[prop]) 
        flag = false; 
      if (prop == "opacity") { 
        obj.style.filter = "alpha(opacity : '+(cur + speed)+' )"; 
        obj.style.opacity = (cur + speed) / 100; 
} 
      else  
        obj.style[prop] = cur + speed + "px"; 
    } 
    if (flag) { 
      clearInterval(obj.timer); 
      if (func) 
        func(); 
    } 
  }, interval); 
} 
var li = document.getElementsByTagName("li"); 
for(var i = 0; i < li.length; i ++){ 
  li[i].onmouseover = function(){ 
    animate(this, {width: 100, opacity: 0.5}, 10, 0.01, function(){ 
      alert("Finished!"); 
    }); 
  } 
}

Related recommendations:

Jquery’s animate() response is too slow to solve the problem

In-depth understanding of jquery custom animation animate()

Usage examples of animate() method in jQuery_jquery

The above is the detailed content of JS implements jQuery's animate() animation. For more information, please follow other related articles on the PHP Chinese website!