如何在一个函数中进行mouseenter,mouseleave切换

Question

我环顾四周找到了解决方案,但我想知道是否有办法编写更简单的代码.基本上我创建的是一个简单的淡入淡出,淡出图像的悬停效果.

$(document).on('mouseenter','.photos div',function () {
    "use strict";
    $(this).find('img.nocolor').stop().animate({ 'opacity': '0' }, 800);
});

$(document).on('mouseleave','.photos div',function () {
    "use strict";
    $(this).find('img.nocolor').stop().animate({ 'opacity': '1' }, 800);
});

我知道你可以将mouseenter,mouseleave放在一起,但我不知道如何构建这样的toggle函数.请让我知道如何简化这一点.

Answer 1

你想用Javacscript实现这个效果吗？您可以使用纯CSS完全实现您的目标:

#an-image {
    opacity: 0.2;
    transition: opacity 0.8s linear;
}

#an-image:hover {
    opacity: 1;
    transition: opacity 0.8s linear;
}

你可以在这里看到一个有效的例子:http://jsfiddle.net/oqqx1z3k/

您可以查看此示例以查看它与您提供的示例相结合.

Answer 2

我没有对此进行测试，但我相信您可以使用 .fadetoggle() 函数来执行您想要的操作。

$('.photos div').on('mouseenter mouseleave',function () {

    $(this).find('img.nocolor').togglefade('slow');
});

或者

$('.photos div').on({
    mouseenter: function() {
        $(this).find('img.nocolor').stop().animate({ 'opacity': '0' }, 800);
    },
    mouseleave: function() {
        $(this).find('img.nocolor').stop().animate({ 'opacity': '1' }, 800);
    }
})

但是，我不喜欢使用切换、鼠标输入和鼠标离开，因为这些功能基于鼠标移动而不是基于 html 文档的位置工作。