jQuery animated hover blinking out of control

Question

Hey good people of this forum..

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()-sentence to prevent this?

Answer 1

The hoverIntent plugin serves that purpose, check it out. To apply it with default options, you would simply change:

$('.button').hover(function(){ 

to:

$('.button').hoverIntent(function(){ 

Answer 2

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