/*
* 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});
});