VoodooBurger VoodooBurger - 1 year ago 70
jQuery Question

jQuery animated hover blinking out of control

I'm using the following code as a hover-function on thumbnails:

$(function (){
$('.button').hover(function() {
if ($(this).is(":not(animated)")) {
$(this).animate({opacity: 0.7}, 'fast');
}
},
function() {
$(this).animate({opacity: 1}, 'fast' );
});
});


The problem is that when I pass over a thumb too fast, the effect keeps blinking for a while... Is there something I can add to the if block to prevent this?

Answer Source

Use stop() to stop the current animation before starting a new one, it should work:

$(function (){      
    $('.button').hover(function() {  
        $(this).stop().animate({opacity: 0.7}, 'fast');
    },
    function(){
        $(this).stop().animate({opacity: 1}, 'fast' );
    });
});