mouseenter, mouseleave, hover jQuery

Question

J'ai un problème avec ces événements. Je ne suis pas sûr de ce qui est le meilleur à utiliser. J'essaye de faire une animation d'opacité en fonction de l'emplacement de la souris.

Je ces structures

<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> 

Fondamentalement, ce que je veux faire est à chaque fois que la souris entre l'image, le reste des images (autre que lorsque la souris est) fera animer le changement d'opacité à savoir : $(img).stop().not(this).animate({"opacity":"0.4"}) et où la souris est animera à l'opacité: 1.

S'il vous plaît aider quelle est la meilleure approche à ce sujet. J'ai essayé de planer mais j'ai échoué.

TIA

Answer 1

Je vous suggère d'utiliser .delegate()^help pour lier un gestionnaire d'événements à l'div.thumbnail-wrapper d'emballage. Attraper tous les événements mouseenter à partir des nœuds <img>. Utilisez .fadeTo()^help et .siblings()^help pour accomplir la tâche.

Exemple:

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

Demo: http://www.jsfiddle.net/qR2NU/2/
^{(j'utilise div nœuds dans l'exemple, vous devez remplacer div avec img dans les .delegate() arguments)}

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