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.

Carminecarmita

Seems to be working well in Firefox and Chrome. – Teakwood

Answer 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.

Scarf

@SimpleCoder - If you hover quickly, that approach really doesn't work :) Also you'd want something that worked for any number of <li> elements here :) – Scarf

You are correct, thanks :) . I have fixed my approach: jsfiddle.net/jUraw/23. Hovering very quickly shouldn't open the menu because of the hover intent – Tacet

And the verdict is - they all worked for me! Thank you so much Nick Craver, SimpleCoder and sje97. I believe I will be implementing SimpleCoder's "23" solution as it seems to provide a stronger skeleton. I'm currently reading JQuery for Dummies, so I'll be studying each of your solutions to see how how you managed to achieve what I could not. I'm so jazzed! Thank you for all your help! – Carminecarmita

Answer 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);
  });
});

Congregate

Wow - thank you all for taking a crack at this. Can't wait to try them all tomorrow and reporting back to you all. (Regarding all who said it looked fine - it really was a quirky little bug where you had to go back and forth over it a few times then just rest your mouse on one of the subnav links - believe me, it totally spazzed out! Often). Thank you so much and I'm learning a lot just by reading the code you suggested. – Carminecarmita