CODEWITHSUNDEEP
jqueryhover
Jacinto
Jacinto

Reputation: 558

Jquery Image Fade Out

I am using this jquery to try and fade out my image and show whats underneath. It works perfect except when you hover over it multiply times. Then it freaks out and starts going in and out over and over again. Is there something I can do about that?

$('#contentPosters li').hover(function(){
    $(this).find('img').fadeOut();
}, 
function(){
    $(this).find('img').fadeIn();
});

Upvotes: 1

Views: 1521

Answers (3)

rkw
rkw

Reputation: 7297

Try using .fadeToggle('fast'), it has all the catches covered.

Looks like stop() doesn't work with the default .fadeToggle, since it would stop the animation while the opacity is halfway through. 

$('#contentPosters li').hover(function(e) {
    $(this).find('img').stop().fadeTo(200,'mouseleave'==e.type)
});

http://jsfiddle.net/rkw79/w2vus/

edit: new fiddle works now

latest update: This is the cleanest solution

http://jsfiddle.net/rkw79/xBtpC/

$('#contentPosters li').hover(function(e) {
  $(this).find('img').stop(true,true).fadeToggle('fast');
});

Upvotes: 0

Jo Albright
Jo Albright

Reputation: 570

Yes. Add "stop()" before your animation function.

$('#contentPosters li').hover(function(){
    $(this).find('img').stop().fadeOut();
}, 
function(){
    $(this).find('img').stop().fadeIn();
});

Ok above would work technically, but I think a better way for it to work would be.

var delay = 200;
$('#contentPosters li').hover(function(){
    $(this).find('img').dequeue().fadeTo(delay,0);
}, 
function(){
    $(this).find('img').dequeue().fadeTo(delay,1);
});

Upvotes: 2

avetarman
avetarman

Reputation: 1252

$('#contentPosters li').hover(function(){
    $(this).find('img').stop().fadeTo('fast',0);
}, 
function(){
    $(this).find('img').stop().fadeTo('fast',1);
});

Use stop() AND fadeTo

stop() is for stopping current animation.

fadeTo() usage is because when you stop the animation during fadeIn / fadeOut, the opacity will not reset to 100%, and your image will become invisible over the time.

Upvotes: 2

Related Questions