Question

I have the following code:

$(document).ready(function() {
    $('#nav li').hover(

    function() {
        // Show the sub menu
        $('ul', this).slideDown(300);
    }, function() {
        //hide its submenu
        $('ul', this).slideUp(200);
    });

});

But if i rollover an Nav menu item quickly, say 50 times..it will keep showing the animation (up and down) 50 times like a loop!…

I tried adding .stop() like $('ul', this).stop().slideDown(300); – but it just stops the menu showing…. so any ideas where to put it in the code or another way to do it please?

Answer 1

The api for stop says Stop the currently-running animation on the matched elements, which is exactly what you need.

In the snippet below, i supply the two parameters aswell. These are:

• clearQueue A Boolean indicating whether to remove queued animation as well. Defaults to false.
• jumpToEnd A Boolean indicating whether to complete the current animation immediately. Defaults to false.

Usually code should look like (thats how i do myself):

$(document).ready(function () {     
  $('#nav li').hover(function () {
    // Show the sub menu
    $('ul', this).stop(true,true).slideDown(300);
  }, 
  function () {
  //hide its submenu
    $('ul', this).stop(true,true).slideUp(200);         
  });
});

EDIT:

I updated the code and set stop to using true,true instead of true,false, which makes the menu work as intended. It will look at little chunky although, because the second parameter forces the animation to end.