JQuery onmouseenter menu and weird mouse behavior

Question

This is my js menu that hides / shows a menu item on hover ... I have a menu like this:

<ul class="main"> <li class="acro_jq_menu"> <a href="" title="How to">How to one </a> <ul> <li>item21</li> <li>ite222m1</li> <li>item1</li> </ul> </li> <li class="acro_jq_menu"> <a href="" title="How to">How to Two </a> <ul> <li>item1</li> <li>it2em1</li> <li>it41em1</li> </ul> </li> </ul> 

And this is javascript:

 function slideMenu() { var items = $('.main li.acro_jq_menu'); items.bind({ mouseenter: function(e) { $(this).find('>ul').css({ 'opacity':0 }).show().animate( { 'opacity':1 }, 500); }, mouseleave: function(e) { $(this).find('>ul').fadeOut(100, function() { $(this).hide(); }) } }); } $(document).ready(function(){ slideMenu(); });​ 

Everything works fine, but sometimes when the mouse leaves the current li content inside this list item for too long (more than 2 seconds or so), and sometimes the content does not appear at all. I think something is wrong with jquery code, but I can't figure it out.

Here is a link to a JSfiddle example of my code: link

Answer 1

Try stopping all animations in events:

http://jsfiddle.net/6hZuV/4/

 function slideMenu() { var items = $('.main li.acro_jq_menu'); items.bind({ mouseenter: function(e) { $(this).stop(true, true).find('>ul').css({ 'opacity':0 }).show().animate( { 'opacity':1 }, 500); }, mouseleave: function(e) { $(this).stop(true, true).find('>ul').fadeOut(100, function() { $(this).hide(); }) } }); }