使用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>

有什么想法吗？

Answer 1

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

这是一个一个接一个褪色的图像的快速示例。

HTML

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

CSS

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

jQuery

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

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

Answer 2

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

jQuery:

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

编辑：

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

Answer 3

虽然您不能直接淡入background-image。您可以淡入仅包含 background-image...的单独元素...

Here's an example

Answer 4

我来到这里是因为我正在寻找基于 <select> 选项更改的背景图像褪色的解决方案。我将我已经写过的内容与上面 Hussein 的 jsfiddle 结合起来，提出了这个jsfiddle.net/v4BMC/。

这最初将两个相同的图像堆叠在一起。当<select> 改变时，顶部图像的样式属性被移除，底部图像的src 被改变并且顶部图像淡出以显示底部图像。 （上图以style="display:none"结尾，需要在操作开始时去掉，否则不起作用。）

希望这对其他人有用，并且不要因为太无关紧要而被包括在这里！