jQuery Hover-Callback-Funktion Problem

Question

Ich versuche, ein Bild zu bekommen undurchsichtig zu bleiben, wenn darauf geklickt, zusammen mit einem Fade-in / out-Funktion auf schweben. Wenn Sie darauf klicken wird es eine Klasse entfernen und fügen Sie das Element eine ‚ausgewählt‘ Klasse. Problem ist, dass altough die ursprüngliche Klasse entfernt wird, noch der Rückruf ausführt, als ob die Klasse ist noch in dem Elemente. Wenn Sie also darauf klicken, ändert sich die Opazität auf 1 und entfernt die .gallery_item Klasse, aber immer noch das Element ausblendet auf schweben ab. Ich weiß, dass der Code verbessert werden könnte, aber es ist nur zu Demonstrationszwecken.

Der Hover-Code:

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

Code für das Click / macht das Element Opazität 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");
});

Was mache ich falsch / was es einen besseren Weg, dies zu erreichen?

Answer 1

Überprüfen Versuchen, wenn das Bild der ausgewählten Klasse hat, bevor Sie den Fade-Effekt innerhalb der mouseout Funktion der Anwendung:

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