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);
        }
    }
);