Witajcie. Animacja w jQuery, jak i zdarzania są zagadnieniem prostym, jednakże mam z tym pewien problem. Załóżmy, że mamy jeden element blokowy, który zawiera kolejne, np.
<div class="hoverEffect">
<div class="mask"></div>
<div class="title"></div>
<div class="describre"></div>
</div>
Teraz załóżmy, że po najechaniu na główny kontener .hoverEffect ma nastąpić animacja wszystkich elementów znajdujących się w środku, a podczas zdarzenia mouseout, elementy mają wrócić na swoje miejsce, np.
$(function(){
$(".hoverEffect").mouseover(function(){
$(this).find(".title").animate({
marginTop: '20px''
});
//pozostałe animacje
}).mouseout(function(){
//elementy wracają na swoje miejsce
});
});
Kod pisałem z palca, więc może zawierać błędy, ale taka jest idea tego skryptu. Problem polega na tym, ze kiedy najadę kursorem na element .hoverEffect, to na przemian następuje zdarzenie mjouseover i mouseout, tj. wszystkie elementy są animonawe w górę i w dół, maska (która ma zabarwiać .hoverEffect) pojawia się i znika. Wiecie dlaczego tak się dzieje?