是否可以为 Jquery .CSS 背景更改设置动画？
Posted
技术标签:
【中文标题】是否可以为 Jquery .CSS 背景更改设置动画？【英文标题】：Is it possible to animate Jquery .CSS background change? 【发布时间】：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() 附加背景图片。 【参考方案1】：好的，我想通了，但这是重复的，因为 @am 不是我建议的 (duplicate question)。
解决我的问题：http://jsfiddle.net/kRjrn/8/
<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 询问背景图像是否褪色。不是颜色。以上是关于是否可以为 Jquery .CSS 背景更改设置动画？的主要内容，如果未能解决你的问题，请参考以下文章
是否可以将 JQuery 'unslider' 配置为仅更改背景？