缓动动画效果

mouseenter 鼠标事件
当鼠标移动到元素上时就会触发mouseenter事件类似 mouseover，它们两者之间的差别是
mouseover鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发之所以这样，就是因为mouseenter不会冒泡跟mouseenter搭配鼠标离开mouseleave同样不会冒泡

动画实现原理
核心原理:通过定时器setInterval0不断移动盒子位置。
实现步骤:获得盒子当前位置让盒子在当前位置加上1个移动距离，利用定时器不断重复这个操作，加一个结束定时器的条件停止操作， 注意此元素需要添加定位，才能使用element.style.left

利用函数封装动画实现多个标签都能参与调用

bug1：利用var开辟新的内存空间占用大量内存影响页面加载速度，此时利用对象的方法解决占用内存方法

bug2:利用一个事件去触发函数当我们重复点击就会出现定时器累加的效果，代码的执行 顺序是从上到下的，我们可以在封装好的函数的开始时使用clearInterval去清除冗杂的定时器

缓变效果制作思路
让盒子每次移动的距离慢慢变小,速度就会慢慢落下来，核心算法:（目标值-现在的位置)/10做为每次移动的距离步长，停止的条件是:让当前盒子位置等于目标位置就停止定时器 

缓动动画添加回调函数

在点击事件里面声明一个函数去调用缓动动画，当调用函数中的操作完成以后利用if判断去暂停定时器，并且在停止后又回调我们在声明函数时定义的实参函数，实现盒子到达指定位置后更改白菜backgroundcolor颜色

动画函数使用案例：

 鼠标经过盒子缓动出来，鼠标离开盒子缓动移出实现只有当我们悬浮到附近的时候才展示出来，对于移出的盒子部分会实现自动隐藏的效果