Question

I am trying to create a vertical scroll menu in a sidebar of page with jquery with the following code:
HTML:

<ul class="side-menu">
<li id="menu1" ><a href="#">Item-1</a>
    <ul class="inner-side-menu" id="menu1_inner">
        <li><a href="#">Sub-item</a></li>
        <li><a href="#">Sub-item</a></li>
        <li><a href="#">Sub-item</a></li>
    </ul>
</li>
<li id="menu2"><a href="#">Item-2</a>
    <ul class="inner-side-menu" id="menu2_inner">
        <li><a href="#">Sub-item</a></li>
        <li><a href="#">Sub-item</a></li>
        <li><a href="#">Sub-item</a></li>
    </ul>
</li>
<li id="menu3"><a href="#">Item-3</a>
    <ul class="inner-side-menu" id="menu3_inner">
        <li><a href="#">Sub-item</a></li>
        <li><a href="#">Sub-item</a></li>
        <li><a href="#">Sub-item</a></li>
    </ul>
</li>
<li id="menu4"><a href="#">Item-4</a>
    <ul class="inner-side-menu" id="menu4_inner">
        <li><a href="#">Sub-item</a></li>
        <li><a href="#">Sub-item</a></li>
        <li><a href="#">Sub-item</a></li>
    </ul>
</li>

JQuery:

<script type="text/javascript">
$('#menu1').mouseenter(function(){
    $('#menu1_inner').show('slow');
}).mouseleave(function(){
    $('#menu1_inner').hide('slow');
});
//Similar for #menu2, #menu3 and #menu4
</script>

I got a very weired error, in normal condition the code is working well but if i take the mouse over #menu1/2/3/4 and leaves immediately than the respective #menu_inner animates two or three times seems like it animates with same effect multiple times without mouse enters or leaves.

What is actually happening here? and what is the solution?
p.s.: I tested this in firefox 10, IE9, Maxthon 3 and Opera 11 with same error.

Answer 1

It happens because the animations are queued and they continue to run unless you forcefully stop them. Use stop method to stop the previous animations.

$('#menu1').mouseenter(function(){
    $('#menu1_inner').stop(true, true).show('slow');
}).mouseleave(function(){
    $('#menu1_inner').stop(true, true).hide('slow');
});

stop(clearQueue, jumpToEnd)– Stops the currently-running animation on the matched elements.