JS implementiert die animate()-Animation von jQuery

In diesem Artikel wird hauptsächlich das in nativem JS implementierte animate()-Animationsbeispiel vorgestellt. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Parametereinführung:

tr>

obj

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

Animation ausführen Das Element

css

JSON-Wertepaar in der Form „{attribute name: attribute value}“ bezieht sich auf die zu animierende Buchsequenz und sein entsprechender Wert

Intervall

Das Zeitintervall für jede Änderung des Attributs

speedFactor

Der Geschwindigkeitsfaktor bewirkt, dass die Animation einen Puffereffekt anstelle einer konstanten Geschwindigkeit hat (speedFactor ist 1)

func

Rückruffunktion nach Ausführung der Animation

Hinweis:

Für jede muss ein Timer hinzugefügt werden Element, sonst beeinflussen sie sich gegenseitig.

cur != css[arr] bestimmt, ob jedes Attribut den Zielwert erreicht hat. Der Timer wird nur gelöscht, wenn alle Attribute den Zielwert erreichen. Die Funktion des Flags besteht darin, zu verhindern, dass der Timer gelöscht wird, wenn ein bestimmtes Attribut als erstes den Zielwert erreicht, es aber andere Attribute gibt, die den Zielwert nicht erreicht haben Wert. Initialisieren Sie daher das Flag vor jeder Änderung auf true. Sobald Sie auf ein Attribut stoßen, das den Zielwert nicht erreicht, wird der Timer nicht gelöscht, bis alle Attribute den Zielwert erreichen.

Der Wert des Attributwerts opacity hat Dezimalstellen, daher ist eine spezielle Verarbeitung erforderlich: Math.ceil(speed) und Math.floor(speed) sowie * 100- und / 100-Operationen.

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

Verwandte Empfehlungen:

Jquerys animate()-Antwort ist zu langsam, um das Problem zu lösen

Umfassendes Verständnis der benutzerdefinierten JQuery-Animation animate()

Verwendungsbeispiele der animate()-Methode in jQuery_jquery

Das obige ist der detaillierte Inhalt vonJS implementiert die animate()-Animation von jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!