mouseenter, mouseleave, hover jQuery

I'm having a problems with these event. I'm not sure what is the best to use. I'm trying to do some opacity animation depending on where the mouse is.

I have these structure

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

Basically, what i want to do is whenever the mouse enters the image, the rest of the images (other than the where the mouse is) will do animate opacity change ie: $(img).stop().not(this).animate({"opacity":"0.4"}) and where the one mouse is will animate to opacity:1.

Please help what is the best approach to this. I tried hover 开发者_如何学Cbut i was unsuccessful.

TIA

---

I'd suggest to use .delegate()^help for binding an event handler to the wrapping div.thumbnail-wrapper. Catching all mouseenter events from the <img> nodes there. Use .fadeTo()^help and .siblings()^help to accomplish the task.

Example:

$('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/
^{(I'm using div nodes in the example, you would need to replace div with img in the .delegate() arguments)}

---

$('.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"})
});

---

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