2

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

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

4

3 回答 3

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);
  }
});
于 2013-09-25T13:23:34.710 回答
0

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

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

演示

于 2013-09-25T13:22:35.423 回答
0

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

于 2013-09-25T13:26:57.713 回答