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

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