如何讓jQuery在鼠標懸停幾秒後出現div？

Question

圖像也應顯示爲顯示加載過程。在mouseout中，div應該消失。我的代碼：

$("a").mouseenter(function() { 
    var link = $(this).attr("href"); 
    $("#flash").show(); 
    $("#flash").fadeIn(3000).html("<img src='load.gif' />"); 
    $("#div"+link).slideDown(100); 
    $("#flash").fadeOut(); 
}); 

$("a").mouseout(function() { 
    $("#flash").fadeOut(1000); 
}); 

Answer 1

有一個看看jQuery的.delay()方法：

這基本上就像setTimeout但允許鏈接。

Answer 2

我假設你想讓div + link部分在幾秒鐘後滑落？ setTimeout()對此很有幫助。

$("a").mouseenter(function(){ 

     var link = $(this).attr("href"); 
     $("#flash").show(); 
     $("#flash").fadeIn(3000).html("<img src='load.gif' />"); 

     setTimeout(function() { 
      $("#div"+link).slideDown(100); 
     }, 2000); 

     $("#flash").fadeOut(); 
}); 

UPDATE： 與setTimeout的問題是你無法取消它，一旦它的排隊。相反，您可以嘗試setInterval，因爲它會返回一個計時器的ID，您可以稍後調用clearInterval。

var timerId = null; 

$("a").mouseenter(function(){ 
    var link = $(this).attr("href"); 
    $("#flash").show(); 
    $("#flash").fadeIn(3000).html("<img src='load.gif' />"); 

    timerId = setInterval((function() { 
        clearInterval(timerId); 
        $("#div"+link).slideDown(100); 
       }, 2000); 

    $("#flash").fadeOut(); 
}); 

$("a").mouseout(function(){ 

    clearInterval(timerId); 
    $("#flash").fadeOut(1000); 

}); 

您致電clearInterval，使函數調用不會不停地重複這一點很重要。

Answer 3

$("my-element").mouseenter(function(){ 
$(this).delay(2000).fadeIn(); 
});