出入与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>

任何想法？

推荐答案

您可以淡化背景颜色而不是背景图像。要解决这个问题的方法是让你的图像作为＆LT; IMG＆GT; 标签，默认显示隐藏：无; 。给你的图片的位置是：绝对和的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屋！