延迟jquery悬停事件?
我想推迟jquery中的悬停事件。 当用户将鼠标悬停在链接或标签上时,我正在从文件中读取数据。 如果用户只是在屏幕上移动鼠标,我不希望此事件立即发生。 有没有办法延迟事件发生?
谢谢。
示例代码:
$(function() {
$('#container a').hover(function() {
$('<div id="fileinfo" />').load('ReadTextFileX.aspx',
{filename:'file.txt'},
function() {
$(this).appendTo('#info');
}
);
},
function() { $('#info').remove(); }
});
});
更新: (1/14/09)添加HoverIntent插件后,上面的代码被更改为以下来实现它。 实施起来非常简单。
$(function() {
hiConfig = {
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
interval: 200, // number = milliseconds for onMouseOver polling interval
timeout: 200, // number = milliseconds delay before onMouseOut
over: function() {
$('<div id="fileinfo" />').load('ReadTextFileX.aspx', {filename:'file.txt'},
function() {
$(this).appendTo('#info');
}
);
}, // function = onMouseOver callback (REQUIRED)
out: function() { $('#info').remove(); } // function = onMouseOut callback (REQUIRED)
}
$('#container a').hoverIntent(hiConfig)
}
使用jQuery的hoverIntent插件:http://cherne.net/brian/resources/jquery.hoverIntent.html
对于你所描述的内容来说这绝对是完美的,而且我几乎在每个需要鼠标悬停菜单激活的项目上都使用它。
这种方法有一个问题,一些接口没有“悬停”状态,例如。 移动浏览器,如iphone上的safari。 您可能隐藏了界面或导航的重要部分,无法在此类设备上打开它。 你可以用设备特定的CSS来解决这个问题。
您需要检查悬停的计时器。 如果它不存在(即这是第一个悬停),请创建它。 如果它存在(即,这不是第一次悬停),请杀死它并重新启动它。 将计时器有效负载设置为您的代码。
$(function() {
var timer;
$('#container a').hover(function() {
if(timer) {
clearTimeout(timer);
timer = null
}
timer = setTimeout(function() {
$('<div id="fileinfo" />').load('ReadTextFileX.aspx',
{filename:'file.txt'},
function() {
$(this).appendTo('#info');
}
);
}, 500)
},
// mouse out
});
});
我敢打赌,jQuery有一个功能,可以为你打包这一切。
编辑:啊,是的,jQuery插件来拯救
完全同意hoverIntent是最好的解决方案,但是如果你碰巧是一个在网站上工作的不幸的草药,需要一个漫长而漫长的过程来批准jQuery插件,这里有一个快速和肮脏的解决方案,对我来说很合适:
$('li.contracted').hover(function () {
var expanding = $(this);
var timer = window.setTimeout(function () {
expanding.data('timerid', null);
... do stuff
}, 300);
//store ID of newly created timer in DOM object
expanding.data('timerid', timer);
}, function () {
var timerid = $(this).data('timerid');
if (timerid != null) {
//mouse out, didn't timeout. Kill previously started timer
window.clearTimeout(timerid);
}
});
这只是为了扩展一个<li>,如果鼠标已经超过300毫秒。
链接地址: http://www.djcxy.com/p/39539.html