如何正確防止事件堆棧使用圖像上的stop（）fadeIn和fadeOut？

Question

我正在製作一個程序，用戶將鼠標懸停在圖像上並創建該懸停圖像的克隆。當用戶從徘徊的圖像中移除光標時，克隆圖像淡出並被刪除。我在fadeIn()和​​之前添加了stop()以防止堆疊中的淡入和淡出動畫事件。

問題是，如果鼠標光標非常快地進入和離開圖像多次，克隆的圖像在動畫中的淡入淡出只是部分完成，或者克隆圖像完全沒有。

的jsfiddle：

jsfiddle

Answer 1

好吧，我知道這是不是你問什麼，但我已經重新寫你的JavaScript中，我相信它的效果最好的一種方式。

請看看這裏http://jsfiddle.net/peduarte/L7VLU/1/

我加了一些註釋解釋。

我認爲你的版本有點沉重。創建克隆並追加每個鼠標懸停，然後每次鼠標懸停刪除它。

我做到了，所以圖像在頁面加載時被克隆，並且它是隱藏的。然後使用hover()函數，只需將其淡入淡出即可。

如果你想保持你的代碼，那麼所有你需要做的就是用替換當前的停止事件：

stop(true, true) 

希望這有助於。