jquery - 如何淡出1格并淡入2格，然后在闲置10秒钟后又淡入第1格，再淡出2格？

这是我目前的代码：

$(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经验的Web设计人员来说，这确实很难。 Betcha编码人员可以在20秒内解决这个问题！

谢谢！

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

最佳答案

我认为您正在追求这样的事情：

$(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秒钟的空闲时间会使淡入淡出。