延迟Javascript悬停操作

Question

我的网站上有一个图像,它有一个分配给它的jquery悬停操作.但是很容易意外地将鼠标移到该区域上,并且如果你不止一次这样做,则悬停会一直出现,消失,出现等,直到它显示并且每次你在它上面消失时消失一次.除非你徘徊几秒钟,否则有没有办法让它不会发动？我不想只是延迟动作,因为它仍然会发生在每次鼠标悬停时,我想看看是否有一种方法鼠标悬停不计算,除非你在图像上几秒钟.

脚本到目前为止:

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

Answer 1

您可以使用setTimeout启动动作和绑定一个函数调用clearTimeout的mouseout事件:

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

或者您可以使用插件,如hoverintent.