mouseenter，mouseleave，hover jQuery

Question

我遇到了這些事件的問題。我不確定什麼是最好的使用。我想根據鼠標的位置做一些不透明的動畫。

我有這些結構

<div class="thumbnail-wrapper"> 
<a href="#">   
<img class="thumb" src="image/image1.png" /> 
</a> 
<a href="#">  
<img class="thumb" src="image/image2.png" /> 
</a> 
<a href="">  
<img class="thumb" src="image/image3.png" /> 
</a> 
<a href="#">  
<img class="thumb" src="image/image4.png" /> 
</a> 
<a href="#">  
<img class="thumb" src="image/image5.png" /> 
</a>  
</div> 

基本上，我想要做的是什麼，只要鼠標進入圖像，圖像的其餘部分（除鼠標的位置等）會做動畫的不透明度的變化，即：$(img).stop().not(this).animate({"opacity":"0.4"}) 和其中一個鼠標將生成不透明度：1。

請幫助什麼是最好的方法。我試圖懸停，但我沒有成功。

TIA

Answer 1

我建議使用.delegate()^help一個事件處理程序綁定到包裝div.thumbnail-wrapper。在那裏從<img>節點捕獲所有mouseenter事件。使用.fadeTo()^help和.siblings()^help完成任務。

例子：

$('div.thumbnail-wrapper').delegate('a', 'mouseenter', function(e) { 
    $(this).stop(1,0).fadeTo('fast', 1).siblings().stop(1,0).fadeTo('fast', 0.2); 
}); 

演示：http://www.jsfiddle.net/qR2NU/2/
^{（我使用div節點的例子，你就需要在.delegate()論點img更換div）}

Answer 2

$('.thumbnail-wrapper img') //all images under the wrapper 
    .bind('mouseenter',function(){//when mouseenter,blur me,focus my siblings 
    $(this).animate({"opacity":"0.4"}).siblings().animate({"opacity":"1"}); 
}).bind('mouseleave',function(){// when mouse out, default state or (make me sober as i call it) 
    $(this).animate({"opacity":"1"}) 
}); 

Answer 3

$('.thumbnail-wrapper img').hover(function(){ 
    $(this).siblings().animate({'opacity': 0.4}); 
}, function(){ 
    $(this).siblings().animate({'opacity': 1}); 
});