JQuery的:悬停功能,如何添加延迟
问题描述:
我有一些JQuery的弹出一个jQuery的对话框,当你将鼠标悬停在图像像这样(http://docs.jquery.com/UI/Dialog)箱:JQuery的:悬停功能,如何添加延迟
$(document).ready(function() {
$("img").hover(function() {
$("#dialog").dialog();
});
});
我有2个问题 1。当我关闭对话框,然后将鼠标悬停在图像上时,对话框不会再出现,我该如何解决这个问题 1.如果用户将鼠标悬停在图像上几秒钟,我该如何弹出该框
答
1 - 您需要首先初始化对话框。 Code here
$(document).ready(function() {
$("#dialog").dialog({ autoOpen: false }); // init without showing
$("img").bind("mouseover", function() {
$("#dialog").dialog('open'); // open the dialog
});
});
2 - 只使用一个计数器
var _counter = 0;
var _seconds = 0;
$("img").hover(function() {
// mouseover
_counter = setInterval(openDialogNow(), 1000);
}, function() {
// mouseout
clearInterval(_counter);
});
function openDialogNow() {
// this function will run every second while the user does not mouseout the image
_seconds++; // add 1 to the global variable
if(_seconds == 3) { // will open in 3 seconds, 3 * 1000 miliseconds
_seconds = 0; // reset, so we can reuse later
$("#dialog").dialog('open'); // open the dialog
}
}
答
1)使用鼠标悬停/鼠标移开或的mouseenter /鼠标离开事件。
2)看看这个:http://cherne.net/brian/resources/jquery.hoverIntent.html。我在几个地方使用过,它可以很好的定制悬停。它还负责处理重点1捕捉自己的事件。