JQuery dropdown menu using slideup and slidedown on hover is jumpy

Question

I've made a very simple dropdown menu using jQuery slideup and slidedown for the functions - but it gets very jumpy (I'm using Firefox 3.6.8) if the mouse is moved to quickly over it, or if the mouse is held on one of the submenu items.

I've made a working example at the following link:

http://jsfiddle.net/jUraw/19/

Without the .stop(true, true) function it is even worse. I've also tried adding hover-intent, but because I have a hover-triggered slideshow in the same div it conflicts with the slideshow's functionality.

Is there something I'm missing? I have heard clearqueue might work, or maybe timeout, but can't figure out where to add them.

Thanks all.

Solution 1

You could build in a slight delay, say 200ms for the animation to complete so it's not jumpy, but leave .stop() so it still won't build up, like this:

$(function () {    
  $('#nav li').hover(function () {
     clearTimeout($.data(this, 'timer'));
     $('ul', this).stop(true, true).slideDown(200);
  }, function () {
    $.data(this, 'timer', setTimeout($.proxy(function() {
      $('ul', this).stop(true, true).slideUp(200);
    }, this), 200));
  });
});

You can give it a try here, this approach uses $.data() to store the timeout per element so each menu's handled independently, if you have many menu items this should give a nice effect.

Solution 2

This one adds a slight delay on open - so running over it quickly won't pop out the menu.

$(function () {    
  $('#nav li').hover(function () {
    $('ul', this).stop(true, true).delay(200).slideDown(200);
  }, function () {
    $('ul', this).stop(true, true).slideUp(200);
  });
});