/*

 * elem: 操作哪一个元素

 * json：表示多个属性

         * attr: 操作的那个元素的css中的什么属性

         * value: 操作的那个元素的css中的那个属性的目标值

 * cb：回调函数，前一个运动执行后，这一段代码才被执行

 */

var startMove = (elem, json, cb)=>{

    // 每当执行运动函数的时候，都先把上一次的运动结束掉

    clearInterval(elem.timer);

    // 开启定时器，让elem的attr属性，不断的变化

    elem.timer = setInterval( ()=>{

        // 循环，把json中的每一个属性，都做处理（让json中的每一个属性，都运动起来）

        var flag = true;        //是不是所有的属性，都运动到了目标值

        for( var attr in json ){

            // attr属性的目标值

            var value = json[attr];                //此时的json是一个只有一个元素的对象，如：    left：500；

                                                        //所以value是500

            // 求当前属性值

            var v = getComputedStyle(elem)[attr];   //attr应该是left

            if( attr=="opacity" ){

                v = Math.round(v*100);

            }else{

                v = parseInt(v);

            }

            //console.log(v);

            // 求目标值与当前值的间距

            var dist = value-v;

            // 求步长值（注意：缓冲运动中，步长值是逐渐减小的）

            var step = dist/6;

            //console.log(step);

            // 如果属性逐渐变大的运动，那么step最后几次的值类似 0.1，我们希望把0.1变为1

            // 如果属性逐渐变小的运动，那么step最后几次的值类似 -0.1，我们希望把-0.1变为-1

            if( step>0 ){

                step = Math.ceil(step);

            }else{

                step = Math.floor(step);

            }

            // 更新属性值

            //console.log(v, step);

            if( attr=="opacity" ){

                elem.style[attr] = (v+step)/100;

            }else{

                elem.style[attr] = (v+step)+'px';

            }

            // 如果到达目标值，运动停止

            //if( v==value ){

            //    clearInterval(elem.timer);

            //}

            if( v!=value ){// 只要有1个属性，没有到达目标值，就让flag等于false

                flag = false;

            }

        }

        // 判断是否所有的属性，都已经到达了目标值

        if( flag ){

            clearInterval(elem.timer);

            if( cb ){    // 如果设置了回调函数，则执行它。不写if的话，当cd没有设置时，会报错

                cb();

            }

        }

    }, 30 );

}

startMove( div1, {"left":100} ,()=>{

    startMove(div1 , {"top" :300});

});