如何让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 （请参阅此问题 ）。