Animate HTML背景圖片淡入淡出

我有一個網站，其中的背景圖像被拉伸到適合整個屏幕。有點擊的拇指釘會改變背景圖像。我試圖在背景圖像發生變化時獲得交叉淡入淡出效果，但似乎無法使其發揮作用。Animate HTML背景圖片淡入淡出

現在，當點擊縮略圖時，整個屏幕（包括內容）淡出，然後淡入正確的背景圖像。我不希望內容淡出......我只想讓背景圖片淡出。我認爲我的問題是我告訴整個HTML頁面淡出，但我不確定如何定位整個網站的背景圖像。

CSS

html { 
    background: url(../img/01.jpg) no-repeat center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

的JavaScript

$("#wrapper #thumbs figure img").click(function() { 
    var id = $(this).attr('id');   
    $('html').fadeOut("slow", function() { }); 
    $('html').fadeIn("slow", function() { 
     $('html').css('background', 'url(' + images[id] + ') no-repeat center fixed'); 
    }); 
});

來源

2012-05-07 Jon

這將是一件好事，如果你加一個小提琴 –

您是否試過使用Backstretch？

來源

2012-05-07 04:22:44

從來沒有聽說過Backstretch。讓我看看:) – Jon

這正是我所需要做的。謝謝:) – Jon

雖然......我注意到它在IE/FF/Opera上比Chrome/Safari執行緩慢。轉型並不順利，但它完成了工作！ – Jon

你不應該針對這種情況的HTML元素，而不是使用多個div S中的身體的整體尺寸。然後，您可以指定z-index以根據需要一次獲取適當的堆疊和交叉淡入淡出兩個元素。

我已經提出了一個在jsFiddle開始的例子。雖然這是一個快速調整背景衰退的例子，但Avinash的答案可能會更好，只要它能適合您的用例。

來源

2012-05-07 04:14:02 Jesse

你可以詳細說明這種技術？我會用這些'div'做什麼？ – Jon

使用背景顏色而不是圖片爲您添加了jsFiddle。 – Jesse

謝謝Jesse。您的代碼不會像Backstretch一樣滯後，但我無法弄清楚如何將圖像製作爲全屏並拉伸整個屏幕的寬度/高度。 – Jon

Animate HTML背景圖片淡入淡出

回答

相關問題