使用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/上的工作示例