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