1 Divをフェードアウトして2 Divでフェードアウトし、10秒の不活動の後、再び1番目の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の経験がないWebデザイナーにとっては、本当に難しいです。コーダーのベッチャは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秒のアイドルだけがフェードを逆に発生させます。

Answer 2

ポール・アイリッシュは作成しました idletimer jQuery用のプラグイン。かなり便利です。