使用 jQuery 淡入淡出背景图像？

Question

到目前为止，我已经尝试了很多事情来达到以下效果，但没有成功：

 <script type="text/javascript">
var x = 0;

while (true) {
    /* change background-image of #slide using some variation
    of animate or fadeIn/fadeOut with or without setTimeout */
    x++;
}
</script>

有任何想法吗？

原文由 Ryan Lester 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以淡化背景颜色，但不能淡化背景图像。解决此问题的方法是将图像设置为 <img> 标签并默认隐藏它们 display:none; 。给你的图像 position:absolute 和 z-index:-1 所以它们就像背景一样，并且在其他一切之后。

这是一个图像逐个淡出的快速示例。

HTML

 <img src=".." />
<img src=".." />

CSS

 img{
 position:absolute;
 z-index:-1;
 display:none;
}

查询

function test() {
    $("img").each(function(index) {
        $(this).hide();
        $(this).delay(3000* index).fadeIn(3000).fadeOut();
    });
}
test();

在 http://jsfiddle.net/RyGKV/ 检查工作示例

原文由 Hussein 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

您可以淡化背景图像！进进出出！

查询：

 $('#yourdiv').animate({opacity: 0}, 0).css("background-image", "url(image.jpeg)").animate({opacity: 1}, 2500);

编辑：

这将使整个 div 褪色，而不仅仅是背景图像。

原文由 Hans. M. 发布，翻译遵循 CC BY-SA 3.0 许可协议