JS implémente l'animation animate() de jQuery

Cet article présente principalement l'exemple d'animation animate() de jQuery implémenté en JS natif. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Introduction aux paramètres :

tr>

obj

obj	执行动画的元素
css	JSON数值对，形式为“{属性名: 属性值}"，指要执行动画的书序及其对应值
interval	属性每执行一次改变的时间间隔
speedFactor	速度因子，使动画具有缓冲效果，而不是匀速不变（speedFactor为1）
func	执行完动画后的回调函数

Exécuter l'animation La paire de valeurs de l'élément

css

JSON, sous la forme de "{nom de l'attribut : valeur de l'attribut}", fait référence à la séquence de livres à animer et sa valeur correspondante

intervalle

L'intervalle de temps pour chaque changement de l'attribut

speedFactor

Le facteur de vitesse donne à l'animation un effet tampon au lieu d'une vitesse constante (speedFactor est 1)

func

Fonction de rappel après l'exécution de l'animation

Remarque :

Une minuterie doit être ajoutée pour chaque element , sinon ils s’influenceront mutuellement.

cur != css[arr] détermine si chaque attribut a atteint la valeur cible. Le minuteur sera effacé uniquement lorsque tous les attributs atteignent la valeur cible. La fonction du drapeau est d'empêcher le minuteur d'être effacé lorsqu'un certain attribut est le premier à atteindre la valeur cible mais que d'autres attributs n'ont pas atteint la cible. valeur. Par conséquent, initialisez l'indicateur sur true avant chaque modification. Dès que vous rencontrez un attribut qui n'atteint pas la cible, définissez l'indicateur sur false. Le minuteur ne sera pas effacé tant que tous les attributs n'atteindront pas la valeur cible.

La valeur de l'attribut opacity a des décimales, un traitement spécial est donc nécessaire : Math.ceil(speed) et Math.floor(speed) ainsi que les opérations * 100 et / 100.

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!"); 
    }); 
  } 
}

Recommandations associées :

La réponse animate() de Jquery est trop lente pour résoudre le problème

Compréhension approfondie de l'animation personnalisée jquery animate()

Exemples d'utilisation de la méthode animate() dans jQuery_jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!