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