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

[Comandeer]

Problem polega na pobraniu tylko nieanimowanych w danym czasie elementów. Lepiej jest użyć $.fn.stop, zatrzymać aktualną animację i odpalić nową.

[trueblue]

Zamiast .not(':animated') spróbowałbym .stop().

P.S. Zamiast tego kodu możesz to załatwić czystym CSS. Również .innerHTML, zastępując zmianą właściwości content.

[Comandeer]

@trueblue content nie działa wewnątrz elementów niereplace'owanych. Trzeba by kombinować z pseudoelementami. Inna rzecz, że tutaj ::before faktycznie może się lepiej sprawować niż taka zabawa z innerHTML

[eFK]

Dzięki za tak szybką odpowiedź, próbowała ze .stop(), ale działało jeszcze gorzej. Spróbuje z $.fn.stop

[trueblue]

@trueblue content nie działa wewnątrz elementów niereplace'owanych. Trzeba by kombinować z pseudoelementami. Inna rzecz, że tutaj ::before faktycznie może się lepiej sprawować niż taka zabawa z innerHTML

Nigdzie nie napisałem, że nie trzeba używać pseudoelementów.

[Comandeer]

@eFK to po prostu inny zapis .stop

@trueblue owszem, nie napisałeś, ale to zabrzmiało jakby content było bezpośrednim zastępstwem dla innerHTML. Niestety jeszcze nie jest - chociaż specyfikacja od dawna twierdzi inaczej.

[eFK]

Ok, już wszytko wiem.
Po prostu w pierwszej wersji to było .mouseover/ .mouseout + .stop() i to działało najgorzej. Potem w czasie poszukiwań rozwiązania okazało się że ..mouseenter/ .mouseleave działają lepiej ale nie sprawdziłam ich z .stop(). Mój błąd. Teraz wszytko działa idealnie. Dziękuję wam za zwrócenie mi uwagi. Temat można usunąć, albo zostawić dla potomnych...

Ten post edytował eFK 14.08.2015, 17:50:10