动画函数 doMove.js

用动画可以直接引用这个动画函数文件，然后调用doMove（）函数。
该函数可以：左移动、右移动、上移动、下移动。高度变化、宽度变化等各种样式变化。
js：

'use strict';

function $(id){return document.getElementById(id);}    

// 运动函数         
function doMove(obj,attr,dir,target,endFn){//参数分别代表：元素、上下左右方向运动、方向（正反方向）、目标位置、回调函数
    // 判断是正方向运动还是反方向运动，这样传实参的速度时就不用写正负号
    dir = parseInt(getStyle(obj,attr)) < target ? dir : -dir;

    // 点击后先关闭定时器，防止用户多次连续点击按钮造成加速运动
    clearInterval(obj.timer);

    obj.timer = setInterval(function(){//开一个定时器，每隔30毫秒前进一下
        var speed = parseInt(getStyle(obj,attr)) + dir;//速度

        //在赋值之前先限制最终距离，如果超过目标位置，那么让其等于目标位置
        if(speed > target && dir > 0 || speed < target && dir < 0){
            speed = target;
        }                       

        obj.style[attr] = speed + 'px';//点击一下按钮，红色方块向前进speed个像素;

        // 当left值大于目标位置时，关闭定时器让红色方块停止
        if(speed == target){//如果到达300，关闭定时器
            clearInterval(obj.timer);

            endFn() && endFn();//判断是否有回调函数，如果有就执行。没有就不要执行
        }
    },30);
}

// 封装获取某个元素的样式函数
function getStyle(obj,attr){//obj:你要获取谁;attr:所获取的对象的什么样式;
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
}