jQuery的mouseover和mouseout事件当快速移动 事件延迟触发问题

首先来看一段代码：

<span style="font-family:SimHei;font-size:14px;">$(document).ready(function(){

    $("div.div1").mouseover(function()

       {$("div.div2").animate({bottom:'10px'},1000);})

    $("div.div1").mouseout(function()

       {$("div.div2").animate({bottom:'-50px'},1000);}
    )
});</span>

上述的代码很简单，我之所以没有用 hover() 来写，是因为我想让代码思路更清晰，更容易理解！它所实现的效果就是将鼠标放在class为“div1”的div上，class为“div2”的div的bottom值为“10px”，将鼠标移开，其值将变为“-50”px，就是一个class为div2上下移动的效果，可是当我快速将鼠标放在class为div1的div上，然后快速移开，以此反复几次，然后你会发现那个class为div2的div在那不停的一上一下，此时，我的鼠标已经没动了，这个效果很差，事件延迟触发，然后我就在想，怎么解决，刚开始，想到