Question

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 1

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