如何在jQuery中停止快速悬停事件答案

【问题标题】：how to stop rapid hover events in jQuery如何在jQuery中停止快速悬停事件
【发布时间】：2013-10-22 21:51:27
【问题描述】：

我想向我的轮播添加按钮，当用户将鼠标悬停在轮播上时会显示这些按钮，并在他们离开该元素时隐藏它们。

我已经这样做了，但是当我快速进入并离开悬停的元素时，一旦我停止，动画（不透明度 0-1）就会重复发生。

这里有一个小提琴来演示。你必须快速进入和离开结果框才能看到我的意思（黑色闪光的东西代表我的按钮）

transitions the opacity on hover, but repeats it a lot when hovered many times

有人知道我怎样才能阻止这种情况发生吗？非常感谢，花了几个小时（即几乎一整天：/）

【问题讨论】：

stackoverflow.com/questions/12727561/… 似乎已经回答了。为什么我需要在 animate() 中添加 100 作为第二个参数？
您没有必须，但这是动画完成的时间（以毫秒为单位）。我相信默认是 300 毫秒。
@a7omiton 并没有阻止它，它只是让它变得不那么明显。如果你在 100 毫秒内悬停 10 次，它需要 1 秒才能完成淡入和淡出。
@KevinB 是的，阿伦向我展示了这个错误，我现在明白了。感谢您说清楚，我将使用 css3 替代方案，感谢上帝

标签： jquery jquery-hover

【解决方案1】：

更新了您的 example 以使用 CSS3 动画，因为这是当今的发展方向。无需 javascript，免费获得更好的性能和优雅的降级！

.next,
.prev {
    opacity: 0;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.image_carousel:hover .next,
.image_carousel:hover .prev {
    opacity: 1;
}

【讨论】：

天哪，我想先在 css 中做，但从没想过 css 中的不透明度，对 jquery 感到非常沮丧。谢谢！！

【解决方案2】：

您可以简单地使用.fadeTo() 代替动画方法，以及.stop() 来中断当前动画。

  var $buttons = $('#next, #prev').hide();

  $('.image_carousel').hover(function() {
    $buttons.stop().fadeTo(300,1);
  },
  function(){
    $buttons.stop().fadeTo(300,0);
  });

演示：http://jsfiddle.net/BrshS/2/

【讨论】：

这个方法实际上停止了我最初想做的动画，非常感谢，不敢相信我忽略了 stop() :P

【解决方案3】：

您可以使用stop 方法“停止”它，

x.stop(true,true).animate(

http://jsfiddle.net/Tentonaxe/BrshS/4/

甚至可能是finish 方法。

x.finish().animate(

http://jsfiddle.net/Tentonaxe/BrshS/5/

【讨论】：