Problème de fonction de rappel jQuery hover

Question

J'essaie de faire en sorte qu'une image reste opaque lorsque je clique dessus, avec une fonction de fondu entrant/sortant en survol. Une fois cliqué, il supprimera une classe et ajoutera une classe "sélectionnée" à l'élément. Le problème est que même si la classe d'origine est supprimée, le rappel s'exécute toujours comme si la classe était toujours dans l'élément. Ainsi, si vous cliquez dessus, il change l'opacité à 1 et supprime la classe .gallery_item, mais élimine toujours l'élément sur hover off. Je sais que le code pourrait être amélioré, mais seulement à des fins de démonstration.

Le code de vol stationnaire:

$(".gallery_item img").hover(
    function() { 
     $(this).fadeTo('50', 1); 
    }, 
    function() { 
     $(this).fadeTo('50', 0.6); 
    } 
); 

Code pour le clic/faire l'opacité de l'élément 1:

$(".gallery_item img").click(function() { 
    $('.gallery_item').removeClass('gallery_item_selected'); 
    $(this).parent().addClass('gallery_item_selected').removeClass('gallery_item'); 
    $(this).css("opacity", "1"); 
}); 

Qu'est-ce que je fais mal/ce qu'il une meilleure façon d'y parvenir?

Answer 1

Essayez de vérifier si l'image a la classe sélectionnée avant d'appliquer l'effet de fondu dans la fonction mouseout:

$(".gallery_item img").hover(
    function() { 
     $(this).fadeTo('50', 1); 
    }, 
    function() { 
     if(!$(this).parent().hasClass('gallery_item_selected')) { 
      $(this).fadeTo('50', 0.6); 
     } 
    } 
);