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

jQuery悬停回调函数问题

1 个答案: