jQuery

Question

我有一个产品图片列表，每个产品有两个不同的图片。第一个在没有悬停在图像上时显示，第二个在悬停在图像上时显示。

问题是，如果我将鼠标悬停在一个产品图片上然后快速移动到另一个产品图片上，那么第一个产品图片会得到第二个产品的第一个图片，所以产品图片是错误的。

代码看起来像这样：

HTML:

<div id="listing">
 <ul>
  <li data-artnr="3212" class="product"> 
    <div class="image"> 
      <a href="/">
        <img src="/pathTo/image/3212.jpg" class="loaded">
      </a>
    </div>
  </li>
  <li data-artnr="3213" class="product"> 
    <div class="image"> 
      <a href="/">
        <img src="/pathTo/image/3213.jpg" class="loaded">
      </a>
    </div>
  </li>
  <li data-artnr="3214" class="product"> 
    <div class="image"> 
      <a href="/">
        <img src="/pathTo/image/3214.jpg" class="loaded">
      </a>
    </div>
  </li>
 </ul>
</div>

jQuery:

$("#listingContent").find(".product").hover(function () {
  $product = $(this);
  $image = $(this).find(".loaded");
  var artnr = $product.data("artnr");
  window.oldImage = $image.attr("src");
  var newImage = "/pathTo/image/"+artnr+"_topoffer.jpg";
  $product.data("old", oldImage);

  $image.fadeOut(150, function () {
    $(this).load(function () {
      $(this).fadeIn(150);
    }).attr("src", newImage);
  });
},
function () {
  $image.fadeOut(150, function () {
    $(this).load(function () {
      $(this).fadeIn(150);
    }).attr("src", oldImage);
  });
});

我想这与 fadeIn/fadeOut 有关，因此 $(this) 在淡入开始之前已经更改。有没有更好的方法来避免这个问题？当我删除 fadeIn/fadeOut 时，问题没有发生，但这是我想要的东西，因为没有它，传输很困难。

Answer 1

首先注意你的HTML是无效的。 li 元素只能是 ul 的子元素，不能是 div.

的子元素

您的问题的原因是因为您使用了全局 oldImage 变量。最好使用存储在 .product 元素上的 'old' data 属性，以便在元素之间快速悬停时不会出现竞争条件。另请注意，您不需要在每个 mouseenter/mouseleave 上 re-bind load() 事件。您可以将它分别放在所有必需的元素上。试试这个：

$('#listingContent .product .loaded').load(function() {
  $(this).fadeIn(150);
});

$("#listingContent .product").hover(function() {
  var $product = $(this);
  var $image = $product.find(".loaded");
  var artnr = $product.data("artnr");  
  $product.data("old", $image.attr('src'));

  $image.fadeOut(150, function() {
    $(this).attr("src", "/pathTo/image/" + artnr + "_topoffer.jpg");
  });
}, function() {
  var $product = $(this);
  var $image = $product.find(".loaded");

  $image.fadeOut(150, function() {
    $(this).attr("src", $product.data('old'));
  });
});

Answer 2

而不是

window.oldImage = $image.attr("src");

您应该将 oldImage 存储在元素本身中，即某些属性中。

$product.data("old", $image.attr("src"));

jQuery - .hover() 在不悬停时变回图像 = 错误的 img

jQuery - .hover() change back img when not hover = wrong img

hover

jquery-hover