Javascript/JQuery背景图像fadeIn

你好，stackoverflow的向导们！我今天刚刚开始使用JQuery，我被卡住了。我需要背景图像在加载时淡入淡出。您可以忽略basepath函数，它正是我所使用的，因此我永远不需要键入图像的完整路径

无论如何，它根本不工作，根本不会加载或更改背景。奇怪的是，我在firefox firebug/web developer中没有发现任何错误，现在我对JQuery非常迷茫

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,')');
        });
        }

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（）；}；
函数基路径（elementObject）{
var elementObject=elementObject.replace（/^url |[\（\）“]/g，”）；
var elementPathArray=elementObject.split（“/”）；
var elementPathArrayLength=elementPathArray.length-1；
对于（变量计数器=0；计数器

我不相信你可以在元素的背景中淡出它的内容

您可以制作一个单独的元素来保持背景并淡入，如中所示

---

或者，您可以将背景设置为淡入的.gif。

据我所知，您无法设置身体背景图像的动画

不过，你可以做的是制作两个占据整个窗口的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;
}

---

这真的很棒！但是它也会在子元素中淡出。因此，与其给它背景淡出的外观，不如让整个页面淡出。这是因为我必须将fadeIn div包裹在其他部分周围，使其完全变大，而不是在顶部或底部压扁。对此有什么建议吗？顺便说一句，谢谢大家，answER非常有用。好的，不必担心div问题已解决。div的样式必须设置为top:0px；left:0px；以及固定或绝对位置。和z-index以将div置于其他div之后。

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