Как мне исчезнуть на 1 деление и исчезнуть на 2 деления, затем через 10 секунд бездействия снова исчезнуть на первом делении и исчезнуть на 2 деления?

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 секунд бездействия заставляют замирания происходить в обратном порядке.

Answer 2

Пол Айриш создал плагин idleTimer для jQuery. Это очень удобно.