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

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 :)

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.