jQuery动画悬停闪烁失控

Posted 2023-05-08

【中文标题】jQuery动画悬停闪烁失控

【英文标题】：jQuery animated hover blinking out of control

【发布时间】：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 块中添加一些东西来防止这种情况发生吗？

【参考方案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() 

【讨论】：

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