jquery - 想要在 mouseenter 上发生一次，但发生两次

Question

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

我的 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;”但似乎没有任何效果。请问大家有什么建议吗？

Answer 1

我建议将 'mouseenter' 处理程序单独绑定(bind)在 '#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);
  }
});