首先来看一段代码：
$(document).ready(function() {
$("div.div1").mouseover(function() {
$("div.div2").animate({bottom:'10px'},1000);
})
$("div.div1").mouseout(function() {
$("div.div2").animate({bottom:'-50px'},1000);
})
});上述的代码很简单，我之所以没有用 hover() 来写，是因为我想让代码思路更清晰，更容易理解！它所实现的效果就是将鼠标放在class为“div1”的div上，class为“div2”的div的bottom值为“10px”，将鼠标移开，其值将变为“-50”px，就是一个class为div2上下移动的效果，可是当我快速将鼠标放在class为div1的div上，然后快速移开，以此反复几次，然后你会发现那个class为div2的div在那不停的一上一下，此时，我的鼠标已经没动了，这个效果很差，事件延迟触发，然后我就在想，怎么解决，刚开始，想到使用omouseenter代替了你原来的mouseover，使得第一次触发事件后，在对象区域反复移动将不再继续触发，然后觉得也可以使用:not(:animated)来判断当前对象是否正在执行动，还想到了preventDefault();结果都有一一去验证，去实现，有的出结果了，但效果还是不理想，有的还没出结果。。。。。
最后，我想到了jQuery的 stop(), 它的作用是停止当前正在运行的动画，只要将目前正在运行的动画停下来，然后在实现往上往下移动就好，然后写下了如下代码：
$('div.div1').hover(
function() {
$("div.div2").stop().animate({bottom:'10px'},1000);})
},
function() {
$("div.div2").stop().animate({bottom:'-50px'},1000);}
}
);结果解决了jQuery的mouseover和mouseout事件当快速移动 事件延迟触发问题，而且动画效果很友好。
mouseover和mouseout在低版本的浏览器会出现闪动的现象
鼠标滑过的时候出现一个层，当鼠标滑到当前层mouseover和mouseout在低版本的浏览器出现闪动现象——解决这个现象的办法不止一种，最简单的把mouseover和mouseout换成对应的mouseenter和mouseleave。
当鼠标指针位于元素上方时，会发生 mouseover 事件。
该事件大多数时候会与 mouseout 事件一起使用。
注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。请看下面例子的演示。
当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。
注意：mouseover ,mouseout当鼠标指针穿过被选元素子元素时，也会触发事件。这在绑定事件时，有时出现意想不到的Bug可能就是由 mouseover mouseout 事件引起的
mouseover与mouseenter
不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
mouseout与mouseleave
不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
