Question

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 but i was unsuccessful.

TIA

Answer 1

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