希望某事在 mouseenter 上发生一次，但发生两次答案

【问题标题】：want something to happen once on mouseenter, but happening twice希望某事在 mouseenter 上发生一次，但发生两次
【发布时间】：2013-10-01 02:41:59
【问题描述】：

我有两张图片。一个是前一段时间的特定位置，另一个是今天的相同位置。当您将鼠标悬停在其中一个上时，我希望图像交换。

我的 HTML 如下所示：

<div id="popup" class="rounded-corners">
    <div class='close'></div>
    <h3>my title</h3>
    <img id="img_then" src="./images/path1.jpg" />
    <img id="img_now" src="./images/path2.jpg" />
</div>

jQuery 代码如下所示：

$("#popup img").one("mouseenter", function() {  
    if ($('#img_now').is(":visible")) {
        $('#img_then').fadeIn(2000);
        $("#img_now").fadeOut(2000);
    }
    else if ($('#img_then').is(":visible")) {
        $('#img_then').fadeOut(2000);
        $("#img_now").fadeIn(2000);
    }
});

但是，当鼠标悬停时，图像会从旧切换到新，然后从新切换到旧。我尝试了许多排列，包括添加“return false;”。但似乎没有任何效果。请问大家有什么建议吗？

【问题讨论】：

开始时两个图像是否可见

标签： jquery mouseover mouseenter

【解决方案1】：

我建议将'mouseenter' 处理程序单独绑定到'#popup' 元素上。

或者在图像周围添加一个包装器，并定位这个包装器：

   <div id="images">
      <img id="img_then" ...>
      <img id="img_now" ...>
   </div>

$("#images").on("mouseenter", function(){
  if ($("#img_now").is(":visible")) {
    $("#img_then").fadeIn(2000);
    $("#img_now").fadeOut(2000);
  }
  else if ($("#img_then").is(":visible")) {
    $("#img_then").fadeOut(2000);
    $("#img_now").fadeIn(2000);
  }
});

【讨论】：

太棒了！谢谢！

【解决方案2】：

淡入/淡出的持续时间为两秒。问题可能是您在淡入淡出仍在进行时获得了新的 mouseenter 事件吗？我认为你关于元素可见的 if 条件只有在淡入淡出完成时才会成立。

【讨论】：

【解决方案3】：

将此绑定到可见的，否则将其绑定到两个图像

$( "#popup img:visible" ).one( "mouseenter", function() {

DEMO

【讨论】：