如何使mouseenter，mouseleave在一个功能中切换答案

【问题标题】：How to make mouseenter, mouseleave toggle in one function如何使mouseenter，mouseleave在一个功能中切换
【发布时间】：2016-11-25 01:28:45
【问题描述】：

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

$(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 放在一起，但我不知道如何构造这样的切换功能。请告诉我如何简化。

【问题讨论】：

"use strict"; 是你在 JS 文件开头写一次的东西——不是在每个函数中......如果你想用一个回调函数处理这两个事件，那么你可能想要一种知道它在回调函数中的事件的方法。所以去看看事件对象的属性（并让你的函数把它作为第一个参数。）
如果您不想在其他地方应用use strict，那么在函数级别定义它是完全合法的。

标签： jquery

【解决方案1】：

你有什么理由想用 Javascript 实现这个效果吗？您可以使用纯 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/

您可以查看this example 以查看它与您提供的示例的结合。

【讨论】：

我喜欢使用直接 css 的想法，但在我的情况下，有一个图像会淡入另一个图像之上。所以它是两个图像都在同一个 div 内的绝对位置。
这听起来不像是 CSS 不能工作的任何原因。如果您认为存在，请发布另一个描述实际问题的问题。
我正在为我想要实现的目标添加一个示例小提琴。 jsfiddle.net/galnova/36uzbndo/29
没有什么是 CSS 做不到的。请参阅我上面的编辑以查看您的演示的 jsfiddle 在没有 JS 的情况下工作。

【解决方案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);
    }
})

但是，我不喜欢使用 toggle、mouseenter 和 mouseleave，因为这些功能基于鼠标移动而不是基于 html 文档的位置。

【讨论】：

【解决方案3】：

$( '.photos div' ).hover(
  function() {
    // MOUSE ENTER
    $(this).find('img.nocolor').stop().animate({ 'opacity': '0' }, 800);
  }, function() {
    // MOUSE LEAVE
    $(this).find('img.nocolor').stop().animate({ 'opacity': '1' }, 800);
  }
);

编辑：绑定功能的选择器不是文档，它是'.photos div'

【讨论】：

需要在document 上重新考虑hover ...只有鼠标离开浏览器工具栏或离开浏览器窗口时才会离开
@charlietfl 你说得对，我刚刚编辑了选择器 :)
问题是 OP 可能会委托该事件来考虑未来不存在的元素
OP 应该澄清。另外我认为上面发布的 CSS 解决方案确实是最好的方法。
css 是的...如果 op 真的在寻找悬停动画，通常也可能要求更复杂的情况

【解决方案4】：

您可以使用event.type 区分

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

另外fadeTo()方法和你使用的动画一样

 $(document).on('mouseenter mouseleave','.photos div',function (evt) {
    "use strict";
     var opacity = evt.type === 'mouseenter' ? 0 : 1;
    $(this).find('img.nocolor').stop().fadeTo( 800, opacity);
});

【讨论】：

【解决方案5】：

您可以使用event.type通过单个切换功能实现此目的，如下所示：

function toggleAnimation(eventName)
{
   "use strict";
  
   $(document).find('img.nocolor').stop().animate({ 'opacity': 
            (eventName == 'mouseenter') ? '0' : '1' }, 800);
}


$(document).ready(function(){

  $(document).on('mouseenter mouseleave','.photos div',function (event) {
     toggleAnimation(event.type);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="photos">
  <div>
<img width="300px" src="http://www.lb.undp.org/content/dam/lebanon/img/AboutLebanon/Lebanon.png" class="nocolor" />
  </div>
</div>

【讨论】：

非常感谢您为我简化了这个过程。有时我会倒退，看不出有多么简单！