3

我正在使用 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 事件是问题所在，如果我取消绑定 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 事件，它可以工作。

4

1 回答 1

4

如果您不必使用插件并在五秒钟不活动后隐藏 div 或 wathever 元素并在其再次活动时显示它，我想出了一个像这样的脚本（在 chrome、firefox、explorer 中测试）：

http://jsfiddle.net/e8KXw/1/

（使用输入进行演示而不是 div）

<input type="text" > /* Use div or any element */

查询：

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;
});

希望它离你所追求的不远。干杯!

于 2011-08-26T12:55:55.757 回答