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

Question

这是我当前的代码:

$(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 秒内解决这个问题!

谢谢!

这个问题已得到解答。谢谢!

Answer 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 秒的空闲时间才会使淡入淡出反向发生。