如何在jquery中克服动画悬停效果中的这个问题？

Question

在以下链接中有一个animated hover effect的示例。如果我们将鼠标悬停在特定列表中，则工具提示将显示并消失，这里没有问题。如果我们继续向上移动鼠标＆amp;在特定列表中，工具提示会出现多次（例如，如果我们将鼠标移动十次，则工具提示也会出现十次）。

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

我通过将脚本更改为（通过添加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 布尔值，指示是否删除排队的动画   好。默认为false。

     

jumpToEndA 表示是否完成当前的布尔值   立即动画。默认为false。

Answer 2

使用$（“。menu li”）。将鼠标悬停在工具提示上一次显示。

Answer 3

你只能指定一个悬停事件，并且只要有mouseenter就会触发，你不能指定类似“只有先前的悬停在5秒前向东方点击时才会触发”。您可以使用Hoverintent插件指定只有当鼠标在里面0.5秒时才会触发悬停。