JS實作jQuery的animate()動畫

本文主要介紹了淺談原生JS實作jQuery的animate()動畫範例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

參數介紹：

obj	執行動畫的元素
#css	JSON數值對，形式為「{屬性名稱: 屬性值}"，指要執行動畫的書序及其對應值
interval	屬性每執行一次改變的時間間隔
#speedFactor	速度因子，使動畫具有緩衝效果，而不是勻速不變（speedFactor為1）
func	執行完動畫後的回呼函數

注意：

必須為每個元素分別增加一個計時器，否則會互相影響。

cur != css[arr]判斷是否每一個屬性已經達到目標值。只有所有屬性都達到目標值，才會清除定時器，flag的作用是防止某個屬性第一個達到目標值但還有其他屬性沒有達到目標值的情況下清除定時器。因此，在每次改變前初始化flag為true，只要遇到一個沒有達到目標的屬性，就將flag置為false，直到所有屬性達到目標值才清除定時器。

屬性值opacity的值有小數，所以需要特別處理： Math.ceil(speed)和Math.floor(speed)以及* 100和 / 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!"); 
    }); 
  } 
}

相關推薦：

#Jquery的animate()反應過慢的問題解決

##深入理解jquery自訂動畫animate()

jQuery中animate()方法用法實例_jquery#

以上是JS實作jQuery的animate()動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！