简单的动画函数封装（2）

<div></div>
    <!-- <span></span> -->
    <button class="btn1">点击500</button>
    <button class="btn2">点击800</button>

 div{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
            margin-top: 100px;
        }
        /* span{
            display: block;
            width: 50px;
            height: 50px;
            background-color: gold;
            margin-top: 200px;
            position: absolute;
            top: 0;
            left: 0;
        } */

    <script>
        // 创建简单的动画函数封装效果(目标对象，目标位置)
    function animate(obj,target,callback){
        //callback回调函数相当于 ：callback = function(){},是零时添加的形参

        //清楚时间效果的同时，只留下一个时间效果
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            //步长值写道定时器里面(缓动动画效果)
            // var step = Math.ceil((target - obj.offsetLeft) / 10);
            var step = (target - obj.offsetLeft) / 10;
            //当step大于0，就向上取值，要不向下取值，然后在赋值给step
            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';
        },30)
    }


        var div = document.querySelector('div');
        var btn1 = document.querySelector('.btn1');
        var btn2 = document.querySelector('.btn2');

    btn1.onclick = function(){
        animate(div,500,function(){
            // alert('你好吗？');
            div.style.backgroundColor = 'green';
        });
    }
    btn2.onclick = function(){
        animate(div,800);
    }
    // animate(span,300);

    </script>

实现效果：