是否可以为 Jquery .CSS 背景更改设置动画？答案

【问题标题】：Is it possible to animate Jquery .CSS background change?是否可以为 Jquery .CSS 背景更改设置动画？
【发布时间】：2012-06-18 12:14:32
【问题描述】：

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

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

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

});
</script>

这很好，但是背景图像非常大，我想在它们完全加载后使用淡入淡出（）或其他东西淡化它们。但是，我似乎找不到使用 jQuery 或 javascript 执行此操作的方法。有吗？有什么聪明的建议吗？如果有帮助，我可以导入 jquery-ui 库。

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

页面加载 -> 图像完成加载 -> 图像淡入 body 元素的背景图片

【问题讨论】：

Animate background image change with jQuery 的可能重复项
你可以试试css3转场mightymeta.co.uk/demos/fading-background-image
我看到了，但它是不同的，因为我需要它仅在图像加载后触发。
Jquery - Background image loaded Check
那个仍然没有解决我正在寻找的功能的fadeIn() 方面。我知道如何测试加载，也知道如何使用 .css() 附加背景图片。

标签： javascript jquery

【解决方案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%;
}

【讨论】：

所以，这里有几个问题 - 我真的希望动态附加背景图像，我的脚本从目录中提取随机图像并用 JS 附加它们。我不能将它们用作 CSS 中的预设背景图像。其次，由于现有网站结构的性质，我真的不想引入另一个 wrap div，也无法将其应用于现有 div，因为它们已经设置了背景。
这不是一个 wrap div，它只是一个单独的元素。请注意，其中必须没有任何内容，CSS 负责定位它，因此它看起来像是包裹了所有内容。至于动态附加图像，只需在执行动画线之前使用 jQuery 的 css() 方法加载它。

【解决方案2】：

信不信由你，jQuery 不支持渐变背景色！不过别担心...有一个插件！

“原始的”背景褪色插件是这个：

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

我也发现了这个：

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

【讨论】：

OP 询问背景图像是否褪色。不是颜色。