封裝的動畫函數

/**
 * 
 * @param {*} elem  元素 
 * @param {*} target 移動的距離
 */
function animate(elem, target) {
  // 1.清除定時器
  clearInterval(elem.timer);
  // 2.獲取元素的當前位置
  var current = elem.offsetLeft;
  // 3.聲明定時器
  elem.timer = setInterval(function () {
    // 4.聲明步進值
    var step = 10;
    // 5.判斷一下  當前位置是否小於目標值
    step = current < target ? step : -step;
    // 6.累加
    current += step;
    // 7.判斷 目標值-當前值 的絕對值  > 步進值的絕對值嗎
    if (Math.abs(target - current) > Math.abs(step)) {
      elem.style.left = current + 'px';
    } else {
      // 8.若是小於 清除定時器 把left值賦值爲目標值
      clearInterval(elem.timer);
      elem.style.left = target + 'px';
    }
  }, 10)
}
複製代碼

第一次在掘金髮表東西 好緊張 好激動！