如何停止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方法它，