如何淡出 1 个 div 并淡入 2 个 div，然后在 10 秒不活动后，再次淡入第一个 div，然后淡出 2 个 div？答案

【问题标题】：How do I fade out 1 div and fade in 2 divs, then after 10 seconds of inactivity, fade in the 1st div again, and fade the 2 divs out?如何淡出 1 个 div 并淡入 2 个 div，然后在 10 秒不活动后，再次淡入第一个 div，然后淡出 2 个 div？
【发布时间】：2010-08-27 09:12:57
【问题描述】：

这是我目前的代码：

$(function() {          
        $('#header_left').click(function(){
            $('#header_left_info').fadeOut('fast');
            $('#header_left').fadeOut('fast');
            $('#header_left_back').delay(250).fadeIn('fast');
        });
});

（250 毫秒的延迟是为了让淡入淡出不会发生冲突）

无论如何，我想修改这个现有的代码，使其#header_left_back 淡出，#header_left 淡入 - 但仅在用户不活动 10 秒后。这应该很简单，但对于一个之前没有 jQuery 经验的网页设计师来说——这真的很难。相信你们的编码员可以在 20 秒内解决这个问题！

谢谢！

这个问题已经回答了。谢谢！

【问题讨论】：

“不活动”到底是什么意思？用户不移动鼠标，不输入任何内容？没有点击任何地方？
你给了我一个想法——我们可以只使用 10 秒的延迟，而不是不活动。我将编辑描述以使事情变得更容易。

标签： jquery fade user-inactivity

【解决方案1】：

我认为你追求的是这样的：

$(function() {          
  $('#header_left').click(function(){
    $('#header_left_info, #header_left').fadeOut('fast');
    $('#header_left_back').delay(250).fadeIn('fast');
  });

  var timer;
  $(document).bind("keypress mousemove", function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
              $('#header_left_back').fadeOut('fast', function() {
                $('#header_left').fadeIn('fast');
              });
            }, 10000);
  });
});

在没有鼠标移动或键盘操作 10 秒后，它会反向淡入淡出，将它们交换回来。如果需要，您可以添加更多事件，例如mousewheel、mousedown，根据您的需要进行具体说明。每次发生事件时，我们都会开始 10 秒倒计时，如果发生另一个事件，我们会清除超时并重新开始 10 秒，因此只有 10 秒的空闲时间会使淡入淡出反向发生。

【讨论】：

实际上，这非常好——而且效果很好！谢谢，你已经回答了这个问题！

【解决方案2】：

Paul Irish 为 jQuery 创建了一个 idleTimer 插件。这很方便。

【讨论】：