1

在以下链接中有一个动画悬停效果的示例。如果我们将鼠标悬停在特定列表中，工具提示将出现和消失，这没有问题。如果我们在特定列表中连续上下移动鼠标，工具提示会出现几次（例如，如果我们移动鼠标十次，工具提示也会出现十次）。

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

我通过将脚本更改为（通过添加 stop() 函数）进行了尝试

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

但它失败了......

4

3 回答 3

3

用于.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] )

clearQueue一个布尔值，指示是否也删除排队的动画。默认为假。

jumpToEnd 一个布尔值，指示是否立即完成当前动画。默认为假。

于 2012-08-14T10:02:19.497 回答
0

使用 $(".menu li").hover 使工具提示出现一次。

于 2012-08-14T09:57:56.520 回答
0

您只能指定一个悬停事件，只要有 ，就会触发mouseenter，您不能指定类似“只有在前一个悬停在 5 秒前向东触发时才触发此悬停”之类的内容。您可以使用Hoverintent插件来指定只有当鼠标在内部停留 0.5 秒时才会触发悬停。

于 2012-08-14T10:01:57.203 回答