how to properly use jquery .stop() ?

Question

Hello!

On this page:

http://www.arvag.net/old/smsbox.de/

when you hover over "Informationen" and "Über uns" you get sub menu shown. When you move mouse away it hides. Normally i have problem with jquery making queue for every single hover i make, and then i just keeps on animating all those hovers. I tried to implement stop() but just cant get it to work properly.

This is the code i am using:

<script type="text/javascript">
    //<![CDATA[
    $(function(){
        $('#nav_menu > .center > ul > li').hover(function() {
            $(this).stop(true,true).children('ul').slideToggle('slow');
        }).click(function(){ 
            return false; 
        });
    });
    //]]>
</script>

Thanks!

Answer 1

I believe you have to put stop(true,true) on the hover-over portion as well. It then interrupts other animations going on at the moment to execute its own, unless I'm mistaken.

    $('#nav_menu > .center > ul > li').hover(function() {
        $(this).stop(true,true).children('ul').slideToggle('slow');
    },function(){
        $(this).stop(true,true).children('ul').slideToggle('slow');
    }).click(function(){
        return false;
    });

Answer 2

You need to .stop() in both directions to stop the queue, otherwise the mouseenter part of the hover keeps queuing it's animations. Also, since you're toggling, you can shorten it down like this:

$('#nav_menu > .center > ul > li').hover(function() {
   $(this).children('ul').stop(true,true).slideToggle('slow');
}).click(function(){ 
  return false; 
});

You would need the .stop() on the ul elements, since that's what's animating. Try this, you'll see it's a bit clunky still because it is resetting the animation instead of queuing. An alternative is to prevent the queue, like this using the :visible and :hidden selectors...I prefer this effect, but up to you :)

$('#nav_menu > .center > ul > li').hover(function() {
   $(this).children('ul:hidden').slideDown('slow');
}, function() {
   $(this).children('ul:visible').slideUp('slow');
}).click(function(){ 
  return false; 
});