jQuery淡入淡出整个网站内容，以显示背景图片

Question

我有一个网站有全尺寸的背景图片。我正在寻找包含标题为“显示背景照片”的按钮或链接，或类似的东西。点击后，整个页面会淡出，使背景图像可见，而在中心，另一个链接/按钮会淡出“显示页面内容”。一旦被点击，就会在网站内容中淡出。

希望这是有道理的。我发现了一个很好的例子：http://ines-papert.de/en/home 我知道我可以从该网站窃取代码，但那会是作弊，我也不理解它。

我是jQuery的新手，不确定从哪里开始使用代码。提前谢谢了。

Answer 1

您可能会在“显示照片”按钮中设置图片的z-index CSS属性，然后关闭按钮，以使其显示在所有其他网站内容之上。也就是说，或者在你的主内容div上设置display:none，并将图像/按钮放在单独的div中。

$('#showPhotoButton').click(function() 
{ 
    $('div#mainContent').hide(); 
    $('#showPhotoButton').hide(); 
    $('#hidePhotoButton').show(); 
}; 

$('#hidePhotoButton').click(function() 
{ 
    $('div#mainContent').show(); 
    $('#showPhotoButton').show(); 
    $('#hidePhotoButton').hide(); 
} 

注意我已经从这里留下了动画。这是一个起点，你可以查找并添加你喜欢的任何动画（或者在hide方法中使用jQuery的持续时间参数，或者CSS3 Transitions）。