如何在 jquery 中克服此问题以获得动画悬停效果

How to overcome from this issue in jquery for an animated hover effect?

本文关键字：动画 悬停 问题 jquery 克服      更新时间：2023-09-26

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

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

我通过将脚本更改为（通过添加 stop（） 函数）来尝试它

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

但它失败了....

使用 .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一个布尔值，指示是否删除排队的动画 井。默认为 false。

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

使用 $（".menu li"）.悬停使工具提示出现一次。

您只能指定悬停事件，并且每当有mouseenter时就会触发，您不能指定类似"仅当上一个悬停在 5 秒前向东触发时，此悬停才应触发"。您可以使用悬停意图插件指定仅当鼠标在里面停留 0.5 秒时，悬停才应触发。

相关文章：