How to stop slideDown() and slideUp() if user hovers out?

Question

Please, I'm having this code:

$('#menu ul > li:not(#menu ul.first li, #menu ul.second li)').mouseenter(function() {
  $(this).find('a').addClass('active');
  $(this).stop(true).find('div.sub').slideDown(500);

}).mouseleave(function() {
  $(this).find('a.active').removeClass('active');
  $(this).stop(true).find('div.sub:visible').slideUp(100);
})

With this code I cant stop started sliding animation, if user removes mouse from "li". So its kinda messy when user accidentally hovers over few menus, all submenus opens, and close with full animation.

I tried with ".stop()", like ".find('div.sub').stop()", and it works, but if you try to hover again, then submenu is only half displayed, how much it was shown first time.

Does anyone have any solution for this one, because I can't re-code it again :(

Thanks and sorry for my poor english :)

Answer 1

Have a look at the hovreIntent plugin. It will allow you to determine if a user is really wanting to hover over an element or just quickly mousing over it and its configurable with timeouts, delays, sensitivity etc.