如何通过触摸/点击屏幕上的任意位置来隐藏/显示元素？

Question

我制作适用于所有桌面/ iPad / iPhone的网站。 在一个页面中，我在页面上有页眉和页脚，在页面加载后5秒钟可以看到它然后会自动消失。 如果我们点击/触摸屏幕上的任何地方，它也会像切换显示/隐藏一样。 当页眉和页脚被看到时，页面区域将像我们在灯箱中看到的那样暗淡。

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

我想要的效果完全像iPad默认的“照片”应用程序

Answer 1

我想这就是你所追求的。 在初始页面加载时，我们在x秒后淡出。 如果用户点击，那么我们会在隐藏时淡入工具栏，或者如果显示则淡出。 如果用户在工具栏中淡出，但在x秒内没有做任何事情，我们会将其淡出。

我通过一些改进更新了我的答案。

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

http://jsfiddle.net/yZbTK/11/show - iPad全屏

我会为你将淡入/淡出的控件分配一个类。 这样你就可以快速轻松地收集它们。 在我的初始代码示例中，使用id来识别它们确实不是很好。

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();
    }
});

Answer 2

一个简短的解决方案是简单地向主体添加一个click事件并在其上切换页眉和页脚：

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

另见： http ： //jsfiddle.net/Sgoettschkes/yZbTK/4/

要在调用时添加“暗淡”，您还可以创建一个位置绝对且不透明的div框，也可以按上面的方式切换。 我玩了一下并创造了这个： http ： //jsfiddle.net/Sgoettschkes/yZbTK/8/

Answer 3

编辑：

var countDown=5;

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

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

应该这样做！