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); 
});