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?