Question

我想在我的旋转木马上添加按钮，当用户悬停在旋转木马上时会显示这些按钮，并在他们离开该元素时隐藏它们。

我已经做到了，但是当我快速进入并离开元素时，动画（不透明度0-1）会在我停止后重复出现。

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

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

有谁知道我怎么能阻止这种情况发生？非常感谢，已经好几个小时（即几乎一整天：/）

Answer 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;
}

Answer 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/

Answer 3

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

x.stop(true,true).animate(

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

或者甚至是finish方法。

x.finish().animate(

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

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

3 个答案: