jQuery - .hover() 호버가 틀리면 img을 바꿉니다. img

Question

각 제품에 서로 다른 두 개의 이미지가있는 productimages 목록이 있습니다. 첫 번째는 이미지 위에 마우스를 올려 놓지 않을 때 표시되고 두 번째 이미지는 이미지 위로 마우스를 가져갈 때 표시됩니다.

문제는 하나의 productimage에서 다른 제품으로 빠르게 이동하면 첫 번째 productimage가 두 번째 제품 firstimage, 즉 잘못된 productimage를 얻게된다는 것입니다.

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

I 추측이 (그래서 fadeIn/페이드 아웃이 $와 함께 할 수있는 뭔가가이

코드는 다음과 같이 보입니다)가 fadeIn이 시작되기 전에 이미 변경되었습니다. 이 문제를 방지하려면 더 나은 방법이 있습니까? 나는 fadeIn/fadeOut을 제거 할 때 문제가 발생하지 않는다. 그러나 이것은 변환이 어렵 기 때문에 내가 갖고 싶어하는 것이다.

Answer 1

먼저 HTML이 유효하지 않습니다. li 요소는 이 아닌 ul의 하위 항목 일 수 있습니다.

전역 oldImage 변수를 사용했기 때문에 문제가 발생했습니다. .product 요소에 저장하는 '이전'data 특성을 사용하면 요소간에 빠르게 마우스를 가져갈 때 경쟁 조건이 발생하지 않는 것이 좋습니다. mouseenter/mouseleave에 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

을 대신 당신이 어떤 속성의 요소 자체 즉에 oldImage을 저장해야

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

일을.

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