延迟 Javascript 悬停动作答案

【问题标题】：Delay Javascript hover action延迟 Javascript 悬停动作
【发布时间】：2013-01-26 22:14:02
【问题描述】：

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

到目前为止的脚本：

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

【问题讨论】：

标签： javascript jquery hover delay

【解决方案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)，因此动画永远不会堆积。

【讨论】：