jQuery - FADEIN une seule fois

Question

je le jQuery suivant:

$("#toolbar").hover(function() { 
    $(".logo").fadeOut("slow", function() { 
    $(this).addClass("logohover") 
     $(this).parent().addClass("logohover").fadeIn("slow", function() { 
      $(".logo").fadeIn("slow"); 
     }); 
    }); 

}); 

<div id="toolbar"> 
<div class="logo"> 
    &nbsp; 
</div> 
</div> 

Quand je passe la souris sur #toolbar il se fane l'arrière-plan .logo out (arrière-plan est défini en CSS), puis change la classe à .logohover et se fane il de retour avec un arrière-plan différent dans le CSS.

Cependant, lorsque je supprime le curseur #toolbar puis que je passe la souris sur la barre d'outils, le fondu .hoverlogo s'ouvre et disparaît.

Lorsque le <div> est défini sur .logohover, je ne veux pas qu'il disparaisse en survol.

Comment puis-je ajuster mon jQuery pour obtenir ceci? OU ajuster mon jQuery pour obtenir un meilleur effet?

Answer 1

Le problème est que les gestionnaires d'événements sont toujours là et réagiront en conséquence.

Vous pouvez essayer d'ajouter un contrôle dans le gestionnaire d'événements pour vérifier le nom de la classe de l'élément et abandonner, i.e. .:

if ($('.logo').hasClass('logohover')) return