jQuery动画悬停闪烁失控答案

【问题标题】：jQuery animated hover blinking out of controljQuery动画悬停闪烁失控
【发布时间】：2011-01-17 08:29:50
【问题描述】：

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

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

问题是，当我过快过大拇指时，效果会持续闪烁一段时间......我可以在 if 块中添加一些东西来防止这种情况发生吗？

【问题讨论】：

标签： jquery hover jquery-animate

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您可以强制效果不排队：

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

【讨论】：

【解决方案3】：

hoverIntent plugin 用于此目的，请查看。要使用默认选项应用它，您只需更改：

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

到：

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

【讨论】：

谢谢你的答案......宁愿不再需要任何插件。所以我会选择第二个答案:)