javascript - 延迟 Javascript 悬停 Action

Question

我的网站上有一张图片，它分配了一个 jquery 悬停 Action 。但是很容易不小心将鼠标悬停在那个区域上，如果你不止一次这样做，悬停会不断出现、消失、出现等等，直到你每次将鼠标悬停在它上面时它就会显示和消失一次。有没有办法让它在你悬停几秒钟之前不会触发 Action ？我不想只是延迟操作，因为它仍然会在每次鼠标悬停时发生，我想看看是否有一种方法鼠标悬停不算数，除非你在图像上停留几秒钟。

到目前为止的脚本:

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

Answer 1

您可以使用 setTimeout 启动操作并在 mouseout 事件上绑定(bind)调用 clearTimeout 的函数:

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

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