blokowanie się .mouseleave, jquery Opcje

[eFK]

Witam serdecznie i z góry przepraszam, jeżeli gdzieś już jest podobny temat - nie mogłam znaleźć.

W moim pionowym menu jedna z pozycji (div id="menu1") ma się powiększać po najechaniu na nią kursorem myszy i ujawniać linki do podstron (pozostałe id=menu0 i menu2 zmniejszają się w tym czasie). Ogólnie działa dobrze, niestety czasami, szczególnie jak się szybko przejedzie kursorem myszy przez mający się powiększać div pozostaje on powiększony i trzeba ponownie najechać na niego kilka razy aby się cofnął do mniejszych rozmiarów.

Wygląda to niezbyt fajnie i chciałabym zrozumieć co może to wywoływać i jak to poprawić. Czy mógłby mi ktoś podpowiedzieć?

Mój kod:

[HTML] pobierz, plaintext 
<script>
$(document).ready(function(){	
	$('#menu1')
	.mouseenter(function(){
	$('#menu0, #menu2').not(':animated').animate({height:32}, 500);
	$('div#menu0 > a > h1').not(':animated').animate({'margin-top':6}, 500);		
	$(this).not(':animated').animate({height:315}, 500);
	document.getElementById('menu1').innerHTML="<a href="">tu są linki do podstron</a><a href=""></a>";
	})
	$('div#menu1 > a')
	.mouseenter(function(){
	$('#menu1').css({'height':'32'});
	})
 
	$('#menu1')
	.mouseleave(function(){
	document.getElementById('menu1').innerHTML="<h1>usługi</h1>";
	$('#menu0, #menu1, #menu2').not(':animated').animate({height:113}, 100);
	$('div#menu0 > a > h1').not(':animated').animate({'margin-top':60}, 100);
	})
})
</script>
[HTML] pobierz, plaintext 

Jeżeli elementy html-a i css-a powiązane z tym menu tez są potrzebne to je zamieszczę.

Ten post edytował eFK 14.08.2015, 13:55:21