VoodooBurger VoodooBurger - 6 months ago 18
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

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