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

나는 포장 div.thumbnail-wrapper에 이벤트 처리기를 바인딩 .delegate()^help를 사용하는 것이 좋습니다 것입니다. 모든 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}); 
});