如何让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对话框在显示之前等待？

回答

相关问题