javascript - 如何克服 jquery 中的这个问题以获得动画悬停效果？

Question

在以下链接中有一个 animated hover effect 的示例.如果我们将鼠标悬停在特定列表中，工具提示将出现和消失，这里没问题。如果我们在特定列表中连续上下移动鼠标，工具提示会出现多次(例如，如果我们移动鼠标十次，工具提示也会出现十次)。

如何解决这个问题(即，如果我们将特定列表悬停几次，工具提示应该只出现一次。

我尝试将脚本更改为(通过添加 stop() 函数)

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

但是失败了....

Answer 1

使用 .stop(true, true) 停止动画。 Check the working demo 。

$(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 Boolean indicating whether to remove queued animation as well. Defaults to false.

jumpToEndA Boolean indicating whether to complete the current animation immediately. Defaults to false.