Как скрыть / показать элемент, коснувшись / щелкнув в любом месте экрана?

#javascript #jquery #css #mobile-safari

Вопрос:

Я создаю веб-сайт, который предназначен для всех настольных компьютеров / iPad / iPhone. На одной странице у меня есть верхний и нижний колонтитулы на странице, которые будут видны в течение 5 секунд после загрузки страницы, после чего они автоматически исчезнут. Если мы нажмем / коснемся в любом месте экрана, это также будет похоже на переключатель для отображения / скрытия. И когда будут видны верхний и нижний колонтитулы, область страницы будет тусклой, как мы видим в лайтбоксах.

http://jsfiddle.net/jitendravyas/yZbTK/2/

Эффект, который я хочу создать, точно такой же, как в приложении «Фотографии» по умолчанию для iPad

введите описание изображения здесь

Ответ №1:

Я думаю, это то, что вам нужно. При начальной загрузке страницы мы исчезаем через x секунд. Если пользователь нажимает, мы исчезаем на панели инструментов, если она скрыта, или исчезаем, если она показана. Если пользователь исчезает на панели инструментов, но ничего не делает в течение x секунд, мы снова его удаляем.

Я обновил свой ответ некоторыми улучшениями.

http://jsfiddle.net/yZbTK/11/

http://jsfiddle.net/yZbTK/11/show — полноэкранный режим для iPad

Я бы назначил класс элементам управления, которые вы будете постепенно вводить / выводить. Таким образом, вы можете собирать их быстро и легко. Использование идентификаторов для их идентификации действительно было не очень хорошим в моем первоначальном примере кода.

 var timer;
var timeVisible = 5000;
timeFadeout();

function timeFadeout() {
    timer = setTimeout(function() {
        $('.controls').fadeOut();          
    }, timeVisible );
}

$('html').click(function() {
    clearTimeout(timer);
    if ($('.controls:visible').length) {
        $('.controls').fadeOut();
    }
    else {
        $('.controls').fadeIn();
        timeFadeout();
    }
});

1. 1 очень близко. но панель инструментов не возвращается в iPad. Я хочу, чтобы этот эффект работал во всех последних версиях настольных и мобильных браузеров. и с сенсорным экраном тоже

2. На вашем компьютере все работает нормально, не так ли? Позвольте мне взять свой iPad и посмотреть, смогу ли я выяснить, что происходит не так.

3. Я только что проверил в своем Android 2.3.6, что он работает нормально. Так что я думаю, что только iOS не работает

4. Попробуйте сейчас, я изменил это document на html после того, как прочитал, что iOS не очень хорошо работает с document.

5. Нам нужно установить новый тайм-аут, если мы будем скрывать содержимое. В противном случае столбцы не будут автоматически скрываться. Toggle не предоставляет эту информацию. Я полагаю, что мы могли бы использовать его функцию обратного вызова, но тогда я думаю, что это не лучше, чем то, что я выбрал в настоящее время.

Ответ №2:

Короткое решение — просто добавить событие щелчка в тело и переключить верхний и нижний колонтитулы на нем:

 $('body').click(function() {
    $('#header').toggle();
    $('#footer').toggle();
});

Смотрите также здесь:http://jsfiddle.net/Sgoettschkes/yZbTK/4

Чтобы добавить «затемнение», как вы это называете, вы также могли бы создать div-поле с абсолютной позицией и непрозрачностью, которое также переключается, как указано выше. Я немного поиграл и создал это:http://jsfiddle.net/Sgoettschkes/yZbTK/8

Ответ №3:

ОТРЕДАКТИРОВАНО:

 var countDown=5;

$('body').click(function() {
   ....
   if (countDown < 1) {
       ...
   }
}

var cleanUp = setInterval(function() {
   countDown--;
   if (countDown < 1) {
       ...
       clearInterval(cleanUp);
   }
},1000);

Это должно сработать!