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

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

1 голос
/ 12 ноября 2011

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

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

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

enter image description here

Ответы [ 3 ]

3 голосов
/ 12 ноября 2011

Я думаю, что это то, что вы после.При начальной загрузке страницы мы исчезаем через 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 голос
/ 12 ноября 2011

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

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

См. Также здесь: http://jsfiddle.net/Sgoettschkes/yZbTK/4/

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

0 голосов
/ 12 ноября 2011

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

var countDown=5;

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

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

Это должно сделать это!

...