JQuery анимированный зависший из-под контроля

Question

Я использую следующий код в качестве функции наведения на миниатюры:

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

Проблема в том, что, когда я слишком быстро перемещаюсь по большому пальцу, эффект постоянно мигает ... Могу ли я что-то добавить в блок if, чтобы предотвратить это?

Answer 1

Используйте stop(), чтобы остановить текущую анимацию перед началом новой, она должна работать:

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

Answer 2

Вы можете заставить эффекты не ставиться в очередь:

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

Answer 3

Плагин hoverIntent служит для этой цели, проверьте его. Чтобы применить его с параметрами по умолчанию, вы просто изменили бы:

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

до:

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