如何让jQuery对话框在显示之前等待?
问题描述:
我想让我的jQuery对话框在用户悬停在图像上后正好显示3秒。目前我有:如何让jQuery对话框在显示之前等待?
$(".imgLi").live('hover', function() {
showDialog();
});
function showDialog()
{
$('#imageDialogDiv').dialog({
modal:true
});
}
<div id="imageDialogDiv" title="Blah">...</div>
不知道哪里也放了时间码或如何在这里实现jQuery的计时器对象。如果在3秒的时间内使用“鼠标移动”(将鼠标从图像移开),我不想想要显示对话框。在此先感谢您的帮助。
答
对不起,我加鼠标移开时一个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>
答
$(".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/
答
您可以在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>
这将在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