动画累积效果

效果图：

css：

给div设置高度和宽度为50px，在设置背景颜色

Hover：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。
当我们快速移入鼠标或移出元素，会发现bug，元素会不断的变长或者变短，也就是说动画会不断的执行下去，完全停不下来，在jq中，如果一个动画没有执行完，它就会被添加到“动画队列”中去，每一次移入或者移出元素，都会产生一个动画效果，如动画效果未执行完，它就会添加到动画队列中去，最后没有被执行完的动画会继续执行，直到所有动画执行完毕，
针对这个bug，我们只需要在移入或移出的元素产生动画执行之前加入stop（）这个方法。就能解决：代码如下：

实际上，jq中还要一种方法可以中断动画效果----finish（）.这个方法与stop（true，true）方法效果类似，因为它会清除排队的当前动画跳动最终值。
Jq手册解释：stop
停止所有在指定元素上正在运行的动画。
如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行
Stop与finis:不同的是它会使用所有排队的动画都跳到各自的最终值。