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:

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!