如何讓jQuery對話框在顯示之前等待？

我想讓我的jQuery對話框在用戶懸停在圖像上後正好顯示3秒。目前我有：如何讓jQuery對話框在顯示之前等待？

$(".imgLi").live('hover', function() { 
    showDialog(); 
}); 

function showDialog() 
{ 
    $('#imageDialogDiv').dialog({ 
     modal:true 
    }); 
} 

<div id="imageDialogDiv" title="Blah">...</div>

不知道哪裏也放了時間碼或如何在這裏實現jQuery的計時器對象。如果在3秒的時間內使用「鼠標移動」（將鼠標從圖像移開），我不想想要顯示對話框。在此先感謝您的幫助。

來源

2012-04-20 IAmYourFaja

對不起，我加鼠標移開時一個cleartimeout因此如果用戶將鼠標離開

$(document).on('mouseenter', ".imgLi", function() { 
    var t=setTimeout("showDialog()",3000); 
}).on('mouseleave', ".imgLi", function() { 
    clearTimeout(t); 
}); 

function showDialog() 
{ 
    $('#imageDialogDiv').dialog({ 
     modal:true 
    }); 
} 

<div id="imageDialogDiv" title="Blah">...</div>

來源

2012-04-20 01:27:39 user1289347

這將在3秒內顯示對話框，即使用戶將鼠標移開，這不是OP所要的。還有更好的做'setTimeout（showDialog，3000）' – 2012-04-20 01:28:52

雅我錯過了，所以我添加了一個clearTimeout，應該照顧它。 – user1289347 2012-04-20 01:37:33

't'在'timedCount（）'範圍內聲明，所以不能在'mouseout'處理程序中訪問。你的'.live（）'參數也是錯誤的。它會導致語法錯誤。 – Strelok 2012-04-20 02:00:18

$(".imgLi").live({ 
     mouseenter: 
      function() 
      { 
       window.myTimeout = setTimeout(showDialog,3000); 
      }, 
     mouseleave: 
      function() 
      { 
       clearTimeout(window.myTimeout); 
      } 
     } 
    ); 

function showDialog() 
{ 
    $('#imageDialogDiv').dialog({ 
     modal:true 
    }); 
}

簡單的jsfiddle它不應該執行：http://jsfiddle.net/weCpE/

來源

2012-04-20 01:35:03 Strelok

您可以在3秒後顯示對話框懸停，如果用戶在3秒鐘之前將鼠標移開，則不會使用此類代碼顯示。

我也遷移了代碼以使用.on()，因爲.live()已在所有版本的jQuery中被棄用。您應該將此代碼中的document替換爲更接近".imgLi"對象的靜態父元素以獲得更好的性能。

var dialogTimer = null; 
$(document).on('mouseenter', ".imgLi", function() { 
    if (!dialogTimer) { 
     dialogTimer = setTimeout(function() { 
      dialogTimer = null; 
      showDialog(); 
     }, 3000); 
    } 
}).on('mouseleave', ".imgLi", function() { 
    if (dialogTimer) { 
     clearTimeout(dialogTimer); 
     dialogTimer = null; 
    } 
}); 

function showDialog() 
{ 
    $('#imageDialogDiv').dialog({ 
     modal:true 
    }); 
} 

<div id="imageDialogDiv" title="Blah">...</div>

來源

2012-04-20 01:35:03 jfriend00

我用布萊恩Cherne的HoverIntent插件以優異的成績 - 你可以很容易地將其配置到你想要的精確延遲。我認爲它不適用於.live（請參閱this question）。

來源

2012-04-20 02:10:04 Yisroel

如何讓jQuery對話框在顯示之前等待？

回答

相關問題