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）。