jQuery懸停（）閃爍/褪色

Question

當鼠標懸停在圖像「A」上時，試圖讓圖像「B」覆蓋圖像「A」。理想情況下，我想它淡入

HTML：

<div id="prod-image"> 
     <img src="../imgs/products/mens/image-A.jpg" class="box-shadow" /> 
    </div> 
    <div id="prod-overlay"> 
     <img src="../imgs/image-B.jpg" /> 
    </div> 

的jQuery：

$(function() { 
    $("#prod-image").hover(function() { 
     $(this).next().fadeIn().show(); 
    }, function() { 
     $(this).next().fadeOut().hide(); 
    }); 
    }); 

問題是每一個鼠標移動它重新觸發懸停效果這意味着它閃滅，因爲它時間觸發鼠標移動的每個像素。我如何才能讓它在我們離開容器div時觸發第二個動作，而不是在其中移動？

感謝您的任何幫助。

[編輯]

CSS：

#prod-overlay { 
    display: none; 
    position: absolute; 
     z-index: 999; 
    top: 0px; 
    } 

基本上它只是坐在這個div在另一個的上面。我不認爲這是真的有關？除非z-索引搞砸了。

[編輯2]

的人誰可能照顧/過這個絆倒......這修復它：

$("#prod-image").hover(function() { 
    $("#prod-overlay").stop(true).fadeTo("normal",1); 
}, function() { 
    $("#prod-overlay").fadeTo("normal",0); 
}); 

似乎有點不必要的給我，但我是誰批評jQuery的？

Answer 1

如何讓你的2張圖片在同一個容器中，並在這個容器上應用懸停觸發？

<div id="container"> 
    <div id="prod-image"> 
     <img src="../imgs/products/mens/image-A.jpg" class="box-shadow" /> 
    </div> 
    <div id="prod-overlay"> 
     <img src="../imgs/image-B.jpg" /> 
    </div> 
</div> 

和

$(function() { 
$("#container").hover(function() { 
    $("#prod-overlay").fadeIn().show(); 
}, function() { 
    $("#prod-overlay").fadeOut().hide(); 
}); 
}); 

它應該工作！