JS - 封装动画函数

// 封装动画函数
function animate(obj, target, callback) {
    // 清空定时器，避免每次激活定时器，让动画加速
    clearInterval(obj.timer);
    // 添加定时器
    obj.timer = setInterval(function () {
        // 让动画效果更平缓，缓动动画
        var step = (target - obj.offsetLeft) / 10;
        // 步数取整，大于0向上取，小于0向下取，才能到target
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        // 如果到目标距离
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            // 如果实参有函数，调用函数
            if (callback) {
                callback();
            }
        }
        // 添加动画
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15)
}

注意：

清空定时器，计算偏移量，不要忘了加元素名

思路：

让目标元素以一定的速度，移动一定的距离

1. 需要定时器

2. 改变元素相对父元素的左边距或上边距（定位），达到移动的目的

3. 到达目标距离后，定时器要清除（判断条件）