用動畫加載背景圖像

Question

我使用一個小腳本將圖像顯示爲div內的背景。問題是，我需要一些動畫，這一點，但沒有我曾嘗試的作品，我實際的腳本是這樣的：

var valimg="image_1.jpg"; 
jQuery("#sw_pic").css("background-image",""+valimg); 
jQuery("#sw_pic").fadeIn(2000); 

的問題，例如，當我運行它，它不會產生淡入淡出效果，我也試過jQuery的animate()，但結果相同。只有不透明似乎起作用，但沒有其他。

如何使用這個或寫代碼，最終運行並獲得一些作爲背景加載圖像時的影響？

問候和thank's的幫助

Answer 1

嘗試使用.hide()

var valimg="image_1.jpg"; 
jQuery("#sw_pic").css("background-image",'url('+ valimg +')'); 
jQuery("#sw_pic").hide().fadeIn(2000); 

，或者你可以在https://stackoverflow.com/a/4631006/3385827

Answer 2

圖像加載緩慢

問題看看假設你在html中設置了一個背景圖像，圖像在第一次加載時就懶惰了下次可以使用瀏覽器緩存。準備好後，嘗試在dom元素上加載圖像。

在HTML標籤負載DOM準備

$(function() { 
    var valimg="image_1.jpg"; 
    jQuery("#sw_pic").css("background-image",""+valimg); 
    jQuery("#sw_pic").fadeIn(2000); 
}); 

這樣

<img src="/path/image_1.jpg" style="display:none"/> 

您的jQuery的圖像內重要