使用jQuery淡入淡出背景图像? [英] Fade background image in and out with jQuery?

问题描述

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

So far, I've tried a bunch of things to the effect of the following, without success:

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

有什么想法吗?

推荐答案

您可以淡化背景颜色，但不能淡化背景图像.解决这个问题的方法是将您的图像作为 <img> 标签并默认隐藏它们 display:none;.为您的图像提供 position:absolute 和 z-index:-1，这样它们就可以像背景一样出现在其他所有内容的后面.

You can fade background colors but not background images. The way to work around this is to have your images as <img> tags and hide them by default display:none;. Give your images position:absolute and z-index:-1 so they act like backgrounds and are behind everything else.

这是一个一个接一个地褪色的快速示例.

Here's a quick example of images fading one after the other.

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();

这篇关于使用jQuery淡入淡出背景图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！