最终的动画函数封装（2）

 	<button>点击触发1</button>
    <button>点击触发2</button>
    <div></div>

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            top: 100px;
            left: 0;
        }
        .div1{
            display: block;
            width: 50px;
            height: 50px;
            background-color: gold;
            margin-top: 200px;
            position: relative;
            top: 0;
            left: 0;
        }
    </style>

 <script>
        var box = document.querySelector('div');
        // var box1 = document.querySelector('.div1');

        // var span = document.querySelector('span');
        var btn1 = document.querySelector('button:nth-child(1)');
        var btn2 = document.querySelector('button:nth-child(2)');


        //给时间函数的变量设置为null
        var timeID = null;

        //进行点击事件：
        btn1.onclick = function(){
            //动画函数封装的调用
            animation(box,0,700,20,60);
            // animation(box1,0,700,20,60);

        }
        btn2.onclick = function(){
            //动画函数封装的调用
            animation(box,700,200,20,60);
            // animation(box1,0,700,20,60);

        }
        //定义一个节流阀,默认动画已经执行完，可以执行下一个动画效果了
        var flag = true;

        //形参有，属性，起始位置，终点位置，每次移动的距离，所需要的时间
        function animation(element,current,target,step,time){
        //添加一个判断条件，防止在一个事件中调用多次动画效果
        //为此同时所有在动画效果内的 flag前都添加上element
        	if(!element.flag){
        		element.flag = true;
        	}	
        	
            if(element.flag){
                //修改flag为false,代表动画正在执行
                element.flag = false;
                //让当前的起始位置跟元素的位置相同
                current = element.offsetLeft; 
                //判断事件函数是否是null
                if(element.timeID != null){
                    //删除时间
                    clearInterval( element.timeID);
                    element.timeID = null
                }
                element.timeID = setInterval(function(){
                    //开始移动元素的位置
                    if(current > target){
                        //设置为负数
                        step = -Math.abs(step);
                    }
                    //判断两点之间的距离 和每次移动的距离比较
                    if(Math.abs(target - current) <= Math.abs(step)){
                        //最后将最终位置赋值给起始位置
                        current = target;
                        // 同时删除时间函数
                        clearInterval(element.timeID );

                        //当动画被清楚时，使flag为true;
                        element.flag = true;
                    }else{
                        // 每次移动的距离进行相加赋值
                        current += step;
                    }
                    //将移动的距离赋值给目标
                    element.style.left = current + 'px';
                },time);//添加事件函数的运行时间
            }
            //设置一个返回值，考试调用者动画是否结束
            return flag;
        }
    </script>

实现效果：

进行动画函数的封装：

//window.onload = function(){





    var timeID = null;
    var flag = true;
    //形参有，属性，起始位置，终点位置，每次移动的距离，所需要的时间
    function animation(element,current,target,step,time){
        if(flag){
            //修改flag为false,代表动画正在执行
            flag = false;
            //让当前的起始位置跟元素的位置相同
            current = element.offsetLeft; 
            //判断事件函数是否是null
            if(element.timeID != null){
                //删除时间
                clearInterval( element.timeID);
                element.timeID = null
            }
            element.timeID = setInterval(function(){
                //开始移动元素的位置
                if(current > target){
                    //设置为负数
                    step = -Math.abs(step);
                }
                //判断两点之间的距离 和每次移动的距离比较
                if(Math.abs(target - current) <= Math.abs(step)){
                    //最后将最终位置赋值给起始位置
                    current = target;
                    // 同时删除时间函数
                    clearInterval(element.timeID );

                    //当动画被清楚时，使flag为true;
                    flag = true;
                }else{
                    // 每次移动的距离进行相加赋值
                    current += step;
                }
                //将移动的距离赋值给目标
                element.style.left = current + 'px';
            },time);//添加事件函数的运行时间
        }
        //设置一个返回值，考试调用者动画是否结束
        return flag;
    }





//};




//调用方式为：
// btn1.onclick = function(){
//     //动画函数封装的调用
//     animation(box,0,700,20,60);
// }