jQuery Hover-Callback-Funktion Problem

Question

Ich versuche, ein Bild zu erhalten, undurchsichtig zu bleiben, wenn auf, zusammen mit einem Fade in/out-Funktion auf schweben angeklickt. Wenn es angeklickt wird, wird eine Klasse entfernen und eine "ausgewählte" Klasse zum Element hinzufügen. Das Problem ist, dass obwohl die ursprüngliche Klasse entfernt wird, der Rückruf noch ausgeführt wird, als ob die Klasse noch im Element ist. Wenn man also darauf klickt, ändert sich die Deckkraft auf 1 und die Klasse .gallery_item wird entfernt, aber das Element wird beim Hovern immer noch ausgeblendet. 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 den Klick/die Deckkraft des Elements 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/wie kann ich das besser erreichen?

Answer 1

Versuchen Sie zu prüfen, ob das Bild die ausgewählte Klasse hat, bevor Sie den Überblendeffekt in der mouseout Funktion:

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