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开发者_StackOverflow中文版 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?

---

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

---

You can force effects not to be queued:

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

---

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(){