简单动画函数封装，让两个盒子均速移动Left位置

动画实现核心原理：通过setInterval()不断来移动盒子的位置。
但要注意的是改元素需要添加定位后，才能移动盒子的位置。

<button class="btn">1号盒子开始移动</button>
<div class="box"></div>
<div class="box2"></div>
<script>
var box = document.querySelector(".box");
var box2 = document.querySelector(".box2");
var btn = document.querySelector(".btn");
// 1.先获取盒子当前的位置 box.offsetLeft
// 2.让盒子的offsetLeft+2px，然后赋值给box.style.left
// 3.为了方便利用，可以把动画移动封装到一个函数中，给两个参数传进去
// 第一个参数是需要移动的元素对象，第二个参数是目标位置
function anmiate(obj,move){
	// 可以给不同的元素使用不同的定时器(某个元素专门用自己的定时器，互不影响)
	 // 开启定时器前先关闭一个定时器，以防多次点击按钮开启多个定时器，速度加快
    clearInterval(obj.timer);
	obj.timer = setInterval(function(){
	// 加一个判断条件，当盒子走到一定位置后，就停下来，也就是清除定时器
	if(obj.offsetLeft >= move){
		clearInterval(obj.timer);
	}else {
		// 让盒子的offsetLeft+2px，然后赋值给box.style.left
		obj.style.left = obj.offsetLeft+2+"px";
	}
		},30)
	}
	// 点击按钮后1号盒子才开始移动
	// 但有个问题，如果不断点击按钮，元素移动的速度会越来越快
	// 这是因为每点击一次按钮都会开启一个定时器，速度就会越来越快
	// 解决办法是，让元素只有一个定时器，在开启定时器之前关闭定时器
	btn.addEventListener("click",function(){
    	anmiate(box,500);
    })
	anmiate(box2,300);
</script>