1

你好stackoverflow的向导！我今天刚刚开始使用 JQuery，但我被困住了。我需要背景图像以淡入淡出 onload。您可以忽略 basepath 函数它只是我使用的，所以我不需要输入图像的完整路径。

无论如何，它根本不工作根本不会加载或更改背景。奇怪的是，我在 firefox firebug/web 开发人员中没有发现任何错误，现在对 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,')');
        });
        }
4

2 回答 2

0

我不相信您可以将元素的背景与其内容分开淡入。

您可以制作一个单独的元素来保存背景并将其淡入，如本问题中所建议的那样

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

于 2013-06-19T02:36:43.800 回答
0

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

你可以做的是制作两个占据整个窗口的 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-19T03:16:06.233 回答