如何在jquery中克服動畫懸停效果中的這個問題？

Question

在以下鏈接中，有一個動畫懸停效果的示例。 如果我們將鼠標懸停在特定列表中，則工具提示將顯示並消失，這里沒有問題。 如果我們在特定列表中連續地上下移動鼠標，則工具提示會出現幾次（例如，如果我們將鼠標移動十次，則工具提示也會出現十次）。

如何克服這個問題（即）如果我們將特定列表懸停多次，工具提示應該只出現一次。

我通過更改腳本來嘗試它（通過添加stop（）函數）

    $(".menu a").hover(function() {
    $(this).next("em").stop().animate({opacity: "show", top: "-75"}, "slow");

但它失敗了....

Answer 1

使用.stop(true, true)來停止動畫。 檢查工作演示 。

$(document).ready(function(){
    $(".menu a").hover(function() {
        $(this).next("em").stop(true, true).animate({opacity: "show", top: "-75"}, "slow");
    }, function() {
        $(this).next("em").stop(true, true).animate({opacity: "hide", top: "-85"}, "fast");
    });
});

闡釋：

.stop(true, true)將刪除排隊的動畫並立即完成當前動畫。

 .stop( [clearQueue] [, jumpToEnd] ) 

clearQueueA布爾值，指示是否也刪除排隊的動畫。 默認為false。

jumpToEndA布爾值，指示是否立即完成當前動畫。 默認為false。

Answer 2

使用$（“。menu li”）。將鼠標懸停在工具提示上一次顯示。

Answer 3

您只能指定一個懸停事件，並且只要有鼠標中心就會觸發該mouseenter ，您不能指定類似“只有先前的懸停在5秒前向東方點擊”時才會觸發的情況。 您可以使用Hoverintent插件指定僅當鼠標位於0.5秒內時才會觸發懸停。