CODEWITHSUNDEEP
javascriptjqueryhtmlhovermouseover
Marvzz
Marvzz

Reputation: 1555

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

TIA

Upvotes: 1

Views: 2008

Answers (3)

jAndy
jAndy

Reputation: 235962

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)

Upvotes: 2

Val
Val

Reputation: 17522

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

Upvotes: 2

GMO
GMO

Reputation: 669

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

Upvotes: 0

Related Questions