Проблема с функцией обратного вызова jQuery

Question

Я пытаюсь заставить изображение оставаться непрозрачным при нажатии, наряду с функцией постепенного появления / наведения при наведении. При нажатии он удалит один класс и добавит «выбранный» класс к элементу. Проблема в том, что хотя исходный класс удален, обратный вызов все еще выполняется, как если бы класс все еще находился в элементе. Таким образом, если вы щелкнете по нему, он изменит непрозрачность на 1 и удалит класс .gallery_item, но все равно затухает при наведении на элемент. Я знаю, что код можно улучшить, но это только для демонстрационных целей.

Код наведения:

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

Код для клика / сделать элемент непрозрачным 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");
});

Что я делаю не так / как лучше это сделать?

Answer 1

Попробуйте проверить, имеет ли изображение выбранный класс, прежде чем применять эффект затухания в функции mouseout :

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