Need help regarding Hover menu
<p>I have made a hover menu in which i have create a small effect, its working fine, but when we shift from one link to another rapidly the effect stands for long time. I want to stop other animation as soon as i shift to the other link, here is the code.</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(function(){

    $('.menu a').bind({
  mouseover: function() {

        $(this).next("em").animate({opacity: "show", top: "-75"}, "slow")
    },
  mouseout: function() {

        $(this).next("em").animate({opacity: "hide", top: "-75"}, "slow");
    }
});

    })
&lt;/script&gt;

&lt;style type="text/css"&gt;
body {
    margin: 10px auto;
    width: 570px;
    font: 75%/120% Arial, Helvetica, sans-serif;
}
.menu {
    margin: 100px 0 0;
    padding: 0;
    list-style: none;
}
.menu li {
    padding: 0;
    margin: 0 2px;
    float: left;
    position: relative;
    text-align: center;
}
.menu a {
    padding: 14px 10px;
    display: block;
    color: #000000;
    width: 144px;
    text-decoration: none;
    font-weight: bold;
    background: url(images/button.gif) no-repeat center center;
}
.menu li em {
    background: url(images/hover.png) no-repeat;
    width: 180px;
    height: 45px;
    position: absolute;
    top: -85px;
    left: -15px;
    text-align: center;
    padding: 20px 12px 10px;
    font-style: normal;
    z-index: 2;
    display: none;
}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;ul class="menu"&gt;
    &lt;li&gt;
        &lt;a href="http://www.webdesignerwall.com"&gt;Web Designer Wall&lt;/a&gt;      
        &lt;em&gt;A wall of design ideas, web trends, and tutorials&lt;/em&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;a href="http://bestwebgallery.com"&gt;Best Web Gallery&lt;/a&gt;
        &lt;em&gt;Featuring the best CSS and Flash web sites&lt;/em&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;a href="http://www.ndesign-studio.com"&gt;N.Design Studio&lt;/a&gt;
        &lt;em&gt;Blog and design portfolio of WDW designer, Nick La&lt;/em&gt;
    &lt;/li&gt;
&lt;/ul&gt;

&lt;/body&gt;
</code></pre>
