封装一个animate函数，使元素以指定的方向和目标距离移动

function animate(dom, cssObj, duration, callback) {
//dom是要运动的元素，cssObj是要运动的属性对象如：{left：700，top：400}, duration元素运动到目标距离的总时长
    // 定义间隔
    var interval = 20;
    // 定义一个新的对象 该对象用于存放dom元素的现在的值
    var nowObj = {};
    // 循环cssObj，依次获取每一个属性名和属性值
    for (var i in cssObj) {
        nowObj[i] = parseInt(getStyle(dom, i))
    }
    // 定义总次数
    var allCount = duration / interval;
    // 定义计数器
    var count = 0;
    var timer = setInterval(function () {
        count++;
        for (var i in cssObj) {
            // 计算总距离
            var distance = cssObj[i] - nowObj[i];
            // 计算单次步长
            var step = distance / allCount;
            // 赋予样式
            if (i.toLowerCase() === "opacity") {
                dom.style[i] = nowObj[i] + count * step;
            } else {
                dom.style[i] = nowObj[i] + count * step + "px";
            }
        }
        if (count >= allCount) {
            clearInterval(timer);
            // 判断 有回调函数就执行回调函数 没有回调函数就不执行
            if (callback) {
                callback();
            }
            // callback && callback();
        }
    }, interval);
    // 定义获取样式函数
    function getStyle(dom, cssProp) { //cssProp要运动元素的运动属性如：left,top
        if (window.getComputedStyle) {
            return window.getComputedStyle(dom)[cssProp];
        }
        return dom.currentStyle[cssProp];
    }
}