用jQuery淡入淡出背景图片?

到目前为止,我已经尝试了以下的一些事情,没有成功:

<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 display:none; 。 给你的图像的position:absolutez-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/检查工作示例;

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

jQuery的:

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

编辑:

这将淡化整个div而不是背景图像。

虽然不能直接淡入background-image 。 您可以淡入仅包含background-image的孤立元素…

这是一个例子

我来到这里是因为我正在寻找一个基于<select>选项更改来淡化背景图像的解决scheme。 我把我已经写过的与侯赛因上面的jsfiddle结合起来,并提出了这个jsfiddle.net/v4BMC/ 。

这最初堆叠两个相同的图像在彼此的顶部。 当<select>被改变时,顶部图像的样式属性被移除,底部图像的src被改变并且顶部图像被淡出以显示底部图像。 (最上面的图像以style="display:none" ,需要在操作开始时删除,否则不起作用。)

希望这对其他人有用,而不是太无关紧要的包括在这里!