JQuery dropdown menu using slideup and slidedown on hover is jumpy JQuery dropdown menu using slideup and slidedown on hover is jumpy jquery jquery

JQuery dropdown menu using slideup and slidedown on hover is jumpy


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.


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