jQuery - .hover() zurück ändern img wenn nicht hover = falsch img

Question

Ich habe eine Liste von Produktbildern mit zwei verschiedenen Bildern auf jedem Produkt. Die erste wird angezeigt, wenn Sie nicht über das Bild fahren, und die zweite wird angezeigt, wenn Sie den Mauszeiger über das Bild bewegen.

Das Problem ist, dass, wenn ich vom Schweben über ein Produktbild und schnell zu einem anderen, dann das erste Produktbild bekommt die zweite Produkte firstimage, so falsch Produktbild.

Der Code sieht etwa so aus:

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); 
    }); 
}); 

Ich denke, das etwas mit dem fadeIn/fadeOut zu tun haben, so dass $ (this) bereits geändert, bevor das FadeIn startet. Gibt es einen besseren Weg, um dieses Problem zu vermeiden? Das Problem tritt nicht auf, wenn ich fadeIn/fadeOut entferne, aber das ist etwas, was ich haben möchte, da ohne es die Übertragung zu hart ist.

Answer 1

Beachten Sie zuerst, dass Ihr HTML ungültig ist. li Elemente können nur Kinder eines ul sein, kein div. Die Ursache Ihres Problems liegt darin, dass Sie die globale Variable oldImage verwenden. Es wäre besser, das "alte" data-Attribut zu verwenden, das Sie auf dem .product-Element speichern, so dass es keine Wettlaufsituation gibt, wenn Sie schnell zwischen Elementen schweben. Beachten Sie auch, dass Sie das Ereignis load() nicht bei jeder mouseenter/mouseleave erneut binden müssen. Sie können es auf alle erforderlichen Elemente separat platzieren. Versuchen Sie folgendes:

$('#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

statt

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

tun Sie oldImage in Elemente selbst das heißt in einem gewissen Attribute gespeichert werden sollen.

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