Javascript/jQuery背景圖片淡入

你好向導的stackoverflow！我今天剛剛開始使用JQuery，並且我卡住了。我需要背景圖片來淡入淡出。您可以忽略basepath函數這正是我所使用的，所以我永遠不需要輸入圖像的完整路徑。Javascript/jQuery背景圖片淡入

無論如何，它只是不工作不會加載或更改背景。奇怪的是，我沒有在firefox firebug/web developer中出現錯誤。

var bodyElement = document.getElementsByTagName("body"); 
var backgroundSource = $(bodyElement[0]).css("backgroundImage"); 
var parentDirectory = basepath(backgroundSource); 
var IMG = parentDirectory + "/jurasic_bg.jpg"; 




window.onload = function(){fadeBG();}; 





function basepath(elementObject){ 
var elementObject = elementObject.replace(/^url|[\(\)"]/g, ''); 
var elementPathArray = elementObject.split("/"); 
var elementPathArrayLength = elementPathArray.length - 1; 

for (var counter = 0; counter < elementPathArrayLength; counter++) 
    { 
     if (counter == 0) 
     { 
      pathBuilder = elementPathArray[counter]; 
     } 

     else 

     var pathBuilder = pathBuilder + "/" + elementPathArray[counter]; 

    } 

     return pathBuilder; 
} 


function fadeBG(){ 
    $('body').fadeIn('slow', function() 
     { 
     $(this).css('background-image', 'url(', IMG,')'); 
     }); 
     }

來源

2013-06-19 Cory Smith

你不能動畫據我所知，身體的背景圖像。

你可以做的是做兩個div來佔據整個窗口。我不認爲早期版本的IE支持CSS（cover）這樣做，但這是你可以做的。

<div class='bg none'></div> 
<div class='bg one'></div> 

div.bg{ 
    min-width: 100%; 
    min-height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-size: cover; 
} 

div.one{ 
    background-image: url('path'); 
    display: none; 
}

你提到了jQuery，所以這是如何工作的：你需要使用文檔就緒事件來觸發你的動畫。你可能需要delay這麼長時間才能得到你想要的效果，但這應該讓你朝着正確的方向前進。哦，不要忘了在你自己的腳本之前在你的HTML中包含jQuery庫。

$(document).ready(function(){ 
    $('div.one').fadeIn(); 
    $('div.none').fadeOut(); 
});

來源

2013-06-19 03:16:06 Psych0Mantis

這實際上很棒！然而，它也會在子元素中消失。所以不是給它看起來像一個背景淡入淡出看起來像整個頁面淡入。這是因爲我不得不包圍fadeIn div圍繞其他人，使其完整的大小，而不是在頂部或底部擠壓。對此有何建議？順便說一句，非常感謝這麼多人的答案是非常有益的。 –

好吧，沒關係div問題解決。 div的風格必須設置爲top：0px; left：0px; –

以及固定或絕對位置。和z-index來定位div。 –

我不相信你可以淡入一個元素的背景與其內容分開。

你可以做一個單獨的元件可以保持背景和褪色，在，在This question

建議或者你可以做背景，在變淡一個.gif。

來源

2013-06-19 02:36:43 Joe

Javascript/jQuery背景圖片淡入

回答

相關問題