jQuery悬停回调函数问题

Question

jQuery悬停回调函数问题

4

我正在尝试让图片在被单击时保持不透明，并在悬停时实现淡入/淡出功能。单击后，它将删除一个类并向元素添加“selected”类。问题在于，尽管原始类已被删除，但回调仍会执行，好像类仍在元素中一样。因此，如果您单击它，它会将不透明度更改为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");
});

我做错了什么/有更好的方法来完成这个任务吗？

(涉及 IT 技术问题)

- Constant Meiring

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- karim79 · Accepted Answer

在mouseout函数内应用淡入效果之前，请检查图像是否具有所选类：

尝试检查图像是否具有所选类，然后再在mouseout函数中应用淡入效果：

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