javascript封裝動畫函式（勻速、變速）

勻速動畫函式--------任意一個元素移動到指定的目標位置（水平方向）

function animate(element,target){
   //先清理定時器
   clearInterval(element.timeId);
   //定時器的id儲存到物件的一個屬性中，為了清理定時器（只能產生一個定時器）
   element.timeId=setInterval(function(){
      //獲取元素的當前位置
      var current=element.offsetLeft;
      //元素每次移動多少畫素
      var step=10;
      //判斷是向左走還是向右走
      step=current<target?step:-step;
      //每次移動後的距離
      current+=step;
      //判斷當前移動後的位置是否到達目標位置
      if(Math.abs(target-current)>Math.abs(step)){
         element.style.left=current+"px";
      }else{
         //清理定時器
         clearInterval(element.timeId);
         element.style.left=target+"px";
      }
   },20);
}

變速動畫函式（緩動動畫）--------任意一個元素移動到指定的目標位置（水平方向）

function animate(element,target){
   //先清理定時器
   clearInterval(element.timeId);
   //定時器的id儲存到物件的一個屬性中，，為了清理定時器
   element.timeId=setInterval(function(){
      //獲取元素的當前位置
      var current=element.offsetLeft;
      //元素每次移動多少畫素
      var step=(target-current)/10;
      //判斷是向左走還是向右走
      step=step>0?Math.ceil(step):Math.floor(step);
      //每次移動後的距離
      current+=step;
      element.style.left=current+"px";
      if(current==target){
         //清理定時器
         clearInterval(element.timeId);
      }
   },20);
}