jQuery Queueing Animations

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