Question

I have three images and using the following code I have then fade in an out on mouse rollover. (they are all in a div of their own with the class ‘thumbs’)

$('.thumbs img').fadeTo('slow', 0.3);  $('.thumbs img').hover(function(){     $(this).fadeTo('normal', 1.0); },function(){     $(this).fadeTo('slow', 0.3); }); 

The problem is that when you roll your mouse over them a few times and they sit there flashing on and off for ages because everytime you roll your mouse over one it adds the effect to a sort of queue. It looks really messy when it happens, is there any way to prevent this?

Answer 1

The best way to prevent this is to add a Stop() before starting the animation. Therefore, your code would look like this:

$('.thumbs img').stop().fadeTo('slow', 0.3);  $('.thumbs img').hover(function(){     $(this).stop().fadeTo('normal', 1.0); },function(){     $(this).stop().fadeTo('slow', 0.3); });