1

我希望我的 jQuery 对话框在用户将鼠标悬停在图像上后正好显示 3 秒。目前我有：

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

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

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

不确定时间代码或如何在此处实现 jQuery 的计时器对象。如果在 3 秒时间范围内的任何时候使用“鼠标移开”（将鼠标从图像上移开），我不希望显示对话框。在此先感谢您的任何帮助。

4

4 回答 4

4

抱歉，我在 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>
于 2012-04-20T01:27:39.753 回答
1 
$(".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-20T01:35:03.183 回答
1

您可以在悬停 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-20T01:35:03.617 回答
0

我使用了来自 Brian Cherne 的HoverIntent插件，效果非常好——您可以轻松地将其配置为您想要的确切延迟。我不认为它适用于.live（见这个问题）。

于 2012-04-20T02:10:04.380 回答