我正在使用 Paul Irish 的空闲计时器插件:http://paulirish.com/2009/jquery-idletimer-plugin/ .
我想在 5 秒不活动后隐藏一些 div,并在捕获用户事件时显示它们。
这是我的代码:
$(document).ready(function(){
$.idleTimer(5000);
$(document).bind("idle.idleTimer", function(){
$("#audio_container").fadeOut(1000);
$(".breadcrumb").fadeOut(1000);
});
$(document).bind("active.idleTimer", function(){
$("#audio_container").fadeIn(1000);
$(".breadcrumb").fadeIn(1000);
});
});
它在 Firefox/Safari/Mobile Safari 上完美运行,但我无法使其在 Chrome 或 IE 8/9 上运行。 显然 onmousemove 事件是问题所在,如果我取消绑定(bind) onmousemove 事件,它就可以工作(但我需要它,所以这对我来说不是一个可接受的修复)。
您可以在这里找到一个示例:
最诚挚的问候,
编辑:
mousemouve 事件位于idle-timer 插件中。
$.idleTimer = function(newTimeout, elem){
// defaults that are to be stored as instance props on the elem
var idle = false, //indicates if the user is idle
enabled = true, //indicates if the idle timer is enabled
timeout = 30000, //the amount of time (ms) before the user is considered idle
events = 'mousemove keydown DOMMouseScroll mousewheel mousedown touchstart touchmove'; // activity is one of these events
如果我从插件中删除 mousemove 事件,它就会起作用。
最佳答案
如果你不必使用插件并在五秒不活动后隐藏 div 或 wathever 元素并在再次事件时显示它,我想出了一个像这样的脚本(在 chrome、firefox、explorer 中测试):
(使用输入代替 div 进行演示)
<input type="text" > /* Use div or any element */
Jquery:
var interval = 1;
setInterval(function(){
if(interval == 5){
/* if intervall reaches 5 the user is inactive hide element/s */
$('input').hide();
interval = 1;
}
interval = interval+1;
console.log(interval);
},1000);
$(document).bind('mousemove keypress', function() {
/* on mousemove or keypressed show the hidden input (user active) */
$('input').show();
interval = 1;
});
希望它离你所追求的不远。 干杯!
关于jquery - 用户不活动后隐藏一堆 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6741192/