延迟 Javascript 悬停动作

Posted 2023-05-08

【中文标题】延迟 Javascript 悬停动作

【英文标题】：Delay Javascript hover action

【发布时间】：2013-01-26 22:14:02

【问题描述】：

我的网站上有一张图片，该图片分配了一个 jquery 悬停动作。但是很容易不小心将鼠标悬停在该区域上，如果您不止一次这样做，悬停会不断出现，消失，出现等，直到您每次将鼠标悬停在它上面时它会显示并消失一次。有没有办法做到这一点，除非你悬停几秒钟，否则动作不会触发？我不想只是延迟操作，因为每次鼠标悬停都会发生这种情况，我想看看是否有一种方法鼠标悬停不计数，除非您在图像上停留几秒钟。

到目前为止的脚本：

$("img.badge").hover(
function() 
  $("h3.better").animate("left": "125px", 1200);
,
function() 
  $("h3.better").animate("left": "-500px", 800);
);

【参考方案1】：

您可以使用setTimeout 来启动操作并在mouseout 事件上绑定一个调用clearTimeout 的函数：

$('img.badge').hover(function()
    window.mytimeout = setTimeout(function()
        $("h3.better").animate("left": "125px", 1200);
    , 2000);
, function()
    clearTimeout(window.mytimeout);    
);

或者您可以为此使用插件，例如 hoverintent。

【讨论】：

这听起来很完美。我还在学习 javascript，但我不确定如何实现该代码。能给我看看吗？

@MollyCampbell 我详细介绍了无插件解决方案。如果你打算使用这个插件，我让你看看他们的文档。

【参考方案2】：

在动画之前使用.stop()，取消之前的动画。我相信这就是您正在寻找的，并且会解决您当前的问题。

$("img.badge").hover(
function() 
  $("h3.better").stop().animate("left": "125px", 1200);
,
function() 
  $("h3.better").stop().animate("left": "-500px", 800);
);

【参考方案3】：

您可以使用计时器来触发悬停动作，直到您像这样被悬停了一定时间，然后，如果悬停在计时器触发之前离开，您可以清除计时器，这样如果您在只徘徊了一小段时间：

$("img.badge").hover(function() 
    var timer = $(this).data("hover");
    // if no timer set, set one otherwise if timer is already set, do nothing
    if (!timer) 
        // set timer that will fire the hover action after 2 seconds
        timer = setTimeout(function() 
            $("h3.better").stop(true).animate("left": "125px", 1200);
            $(this).data("hover", null);
        , 2000);
        // save timer
        $(this).data("hover", timer);
    
, function() 
    var timer = $(this).data("hover");
    if (timer) 
        clearTimeout(timer);
        $(this).data("hover", null);
     else 
        // probably would be better to make this an absolute position rather
        // than a relative position
        $("h3.better").stop(true).animate("left": "-500px", 800);
    
);

注意：我还在您的动画中添加了.stop(true)，因此动画永远不会堆积。