我想在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)
}
发布于 2009-01-12 15:31:16
使用jquery的hoverIntent插件:http://cherne.net/brian/resources/jquery.hoverIntent.html
它完全符合你的描述,我几乎在每个需要鼠标悬停激活菜单的项目中都使用过它。
这种方法有一个问题,一些接口没有“悬停”状态,例如。像iphone上的safari一样的移动浏览器。您可能隐藏了界面或导航的重要部分,但无法在这样的设备上打开它。你可以用特定于设备的CSS来解决这个问题。
发布于 2009-01-12 15:40:28
你需要在悬停时检查计时器。如果它不存在(即这是第一次悬停),则创建它。如果它存在(即这不是第一次悬停),杀死它并重新启动它。将计时器有效负载设置为您的代码。
$(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 plugin to the rescue
发布于 2011-12-08 22:25:43
完全同意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);
}
});
如果鼠标停留的时间超过300ms,则此命令仅用于扩展。
https://stackoverflow.com/questions/435732
复制相似问题