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

我想将按钮添加到我的传送带，当用户悬停在传送带上时显示该按钮，并在他们离开该元素时将其隐藏。如何停止jQuery中的快速悬停事件

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

这里是一个演示的小提琴。你必须迅速进入和离开的结果框明白我的意思（黑flashly东西都是我的按钮的表示）

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

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

来源

2013-10-22 a7omiton

http://stackoverflow.com/questions/12727561/jquery-hover-mouseenter-mouseleave-state-opacity-animate?rq=1似乎已经回答了这个问题。为什么我需要为animate（）添加100作为第二个参数？ – a7omiton

你不*有*，但它是以毫秒为单位的动画完成时间。我相信默认是300毫秒。 – ahren

@ a7omiton不能阻止它，它只是使它不那么明显。如果您在100毫秒内悬停10次，则需要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; 
}

来源

2013-10-22 22:03:28 nietonfir

omg我想先在CSS中做到这一点，但从来没有想过在CSS中的不透明性，对jQuery感到非常沮丧。谢谢！！ – a7omiton

您可以简单地使用.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/

来源

2013-10-22 21:57:44 ahren

这种方法实际上停止了我最初想做的动画，非常感谢，不能相信我忽略了停止（）：P – a7omiton

可以“停止” 与stop方法它，