Question

我使用以下方法将背景图像附加到body元素：

<script>
$(document).ready(function(){

    $("body").css( "background" , "url(someimage.jpg)");

});
</script>

这很好，但是背景图片真的很大，我想在使用fadein（）或者一旦它们一直加载的东西后淡出它们。但是，我似乎无法通过jQuery或javascript找到一种方法。有吗？有什么聪明的建议吗？我可以导入jquery-ui库，如果这会有所帮助。

所以要清楚，我需要做的事情是这样的：

网页加载 - ＆gt;图像完成加载 - ＆gt;图像逐渐消失身体元素的背景图像

Answer 1

好的，我想出来了，但这是重复的，因为@am不是我的建议（duplicate question）。

与我的解决方案合作：http://jsfiddle.net/kRjrn/8/

HTML

<body>
    <div id="background">.
    </div>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>    
</body>

的javascript

$(document).ready(function(){
    $('#background').animate({ opacity: 1 }, 3000);
});

CSS

#background {
    background-image: url("http://media.noupe.com//uploads/2009/10/wallpaper-pattern.jpg");
    opacity: 0;
    margin: 0;
    padding: 0;
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
}

Answer 2

信不信由你，jQuery不支持淡化背景颜色！但不要担心......有一个插件！

“原始”背景淡化插件就是这个：

https://github.com/jquery/jquery-color

我也发现了这个：

http://www.bitstorm.org/jquery/color-animation/

是否有可能为Jquery .CSS背景更改设置动画？

2 个答案: