在用户不活动后隐藏一堆div

Question

我使用的是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事件，它的工作(但我需要它，所以这不是一个可接受的修复对我来说)。

你可以在这里找到一个例子:

最诚挚的问候,

编辑:

鼠标移动事件位于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

如果我从插件中删除鼠标移动事件，它会工作。

Answer 1

如果你不需要使用插件和隐藏div或任何元素后五秒钟不活动，并显示它一旦再次活动，我想出了一个脚本这样(测试在chrome,firefox, explorer):

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

(使用输入代替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;
});

希望它离你想要的不远。干杯!