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'元素上绑定'#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);
  }
});

Answer 2

这样做会将它绑定到可见的，否则你将它绑定到两个图像

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

DEMO

Answer 3

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

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

3 个答案: