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

Question

我希望我的jQuery對話框在用戶將鼠標懸停在圖像上后准確顯示3秒。 目前我有：

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

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

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

不知道在哪里也放置時間代碼或如何實現jQuery的計時器對象。 如果在3秒鍾的時間內在任何時候使用“將鼠標移開”（將鼠標從圖像移開），我都不希望對話框顯示。 在此先感謝您的任何幫助。

Answer 1

抱歉，我在mouseout上添加了一個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>

Answer 2

$(".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/

Answer 3

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

我還遷移了代碼以使用.on()因為.live()在所有版本的jQuery中都已棄用。 您應使用更靠近".imgLi"對象的靜態父元素替換此代碼中的document ，以提高性能。

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>

Answer 4

我使用了Brian Cherne的HoverIntent插件，效果非常好-您可以輕松地將其配置為所需的確切延遲。 我認為它不適用於.live （請參閱此問題 ）。