jQuery mouseout和setTimeout

Question

我有以下代码。

$("#login").mouseout(function() { 
    setTimeout(function() { 
     $("#login").animate({ 
      height: "toggle" 
     }) 
    }, 500); 
}); 

当鼠标离开#login时，它将等待500毫秒，然后它将隐藏该元素。我想要的是，如果鼠标离开元素并在500毫秒内返回，它不会隐藏元素。否则，如果鼠标距元素的“范围”超过500毫秒，它将调用动画函数并隐藏该元素。

如果我把这段代码有

$("#login").mouseover(function() { 
    clearTimeout(t); 
}); 

，我拿鼠标在元素上时，它的关闭动画完成后，它会再次弹出。

Answer 1

声明一个变量为setTimeout，这样就可以使用clearTimeout：
（加上解决你的“它会再次弹出”问题）

$("#login") 
    .mouseout(function() { 
     window.t = setTimeout(function() { 
      $("#login").animate({ 
       height: "toggle" 
      }) 
     }, 500); 
    }) 
    .mouseover(function(){ 
     if(window.t){ 
      clearTimeout(window.t); 
      window.t = undefined; 
     }else{ 
      //Do your menu popup thing here 
     } 
    }); 

Answer 2

您可以清除超时在mouseenter或mouseover事件。

var t; 
$("#login").mouseenter(function() { 
    clearTimeout(t); 
}); 
$("#login").mouseout(function() { 
    t = setTimeout(function() { 
     $("#login").animate({ 
      height: "toggle" 
     }) 
    }, 500); 
});