CODEWITHSUNDEEP
jqueryjquery-animate
Yammi
Yammi

Reputation: 735

jQuery - Hover lots of times breaks javascript?

I have a simple bit of code, when the user hovers over an image on a slideshow, the associated text fades in over the image. However if the user hovers back and forth a few times the effect just stops working?

$('div.slideshowImage').hover(function() {
$('div.slideshowImageText').stop().fadeIn('500');
},
function() {
$('div.slideshowImageText').fadeOut('500');
});

Upvotes: 1

Views: 377

Answers (1)

Nick Craver
Nick Craver

Reputation: 630429

You need to clear the queue as well, like this:

$('div.slideshowImage').hover(function() {
  $('div.slideshowImageText').stop(true).fadeIn('500');
}, function() {
  $('div.slideshowImageText').fadeOut('500');
});

The first parameter of .stop() tells it whether to clear the queue or not...currently you're stopping the animation, but repeated hover-outs will queue up competing animations screwing with your fades...when you don't want the queue to execute later, clear it out, otherwise it'll interfere like it does here.

Upvotes: 4

Related Questions