jQuery 动画悬停闪烁失控

Question

我使用以下代码作为缩略图上的悬停功能:

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

问题是，当我过快地传递拇指时，效果会持续闪烁一段时间...我可以在 if block 中添加一些内容来防止这种情况吗？

Answer 1

在开始新动画之前使用 stop() 停止当前动画，它应该可以工作:

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