moveElement：要移動的節點物件
targetLeft：移動的目標位置

封裝勻速移動動畫函式

 function moveAnimated(moveElement,targetLeft) {
            // 先清理定時器，防止定時器累加，速度越來越快
            clearInterval(moveElement.timeId);
            //每次的點選操作都只產生一個定時器，定時器的id值儲存到一個物件的屬性中
            moveElement.timeId=setInterval(function () {
                // 獲取div當前left值
                var currentLeft=moveElement.offsetLeft;
                //設定每次移動一次的距離------步數
                var step=7;
                //判斷移動的方向
                step=currentLeft<targetLeft?step:-step;
                // 每次移動後的位置
                currentLeft+=step;
                // 判斷當前移動後的位置是否達到目標位置
                if(Math.abs(targetLeft-currentLeft)>Math.abs(step)){
                    moveElement.style.left=currentLeft+"px";
                }else{
                    //到達目標位置則清理定時器
                    clearInterval(moveElement.timeId);
                    moveElement.style.left=targetLeft+"px";
                }
            },20)
        }
 

封裝變速移動動畫函式

 function moveAnimated(moveElement,targetLeft) {
        // 先清理定時器，防止定時器累加，速度越來越快
        clearInterval(moveElement.timeId);
        //每次的點選操作都只產生一個定時器，定時器的id值儲存到一個物件的屬性中
        moveElement.timeId=setInterval(function () {
            // 獲取div當前left值
            var currentLeft=moveElement.offsetLeft;
            //設定每次移動一次的距離------步數
            var step=(targetLeft-currentLeft)/10;
            // 正數則向上取整，負數則向下取整
            step=step>0?Math.ceil(step):Math.floor(step);
            // 每次移動後的位置
            currentLeft+=step;
            moveElement.style.left=currentLeft+"px";
            if(currentLeft==targetLeft){
                //到達目標位置則清理定時器
                clearInterval(moveElement.timeId);
            }
            //測試程式碼
            console.log("目標位置："+targetLeft+"，當前位置："+currentLeft+",移動步數："+step);
        },20)
    }