jQueryホバーコールバック関数の問題

Question

クリックすると画像が不透明になり、ホバーでフェードイン/フェードアウト機能を使用しようとしています。クリックすると、1つのクラスが削除され、「選択された」クラスが要素に追加されます。問題は、元のクラスが削除されても、クラスがまだ要素にあるかのようにコールバックが実行されることです。したがって、クリックすると、不透明度が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);
        }
    }
);