使用 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的孤独元素......

这是一个例子

Answer 4

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

这最初将两个相同的图像堆叠在一起。 更改<select> ，顶部图像的样式属性将被删除，底部图像的src将更改，顶部图像将淡出以显示底部图像。 （顶部图像以style="display:none" ，需要在操作开始时删除，否则无效。）

希望这对其他人有用，而不是太无关紧要，不能包含在这里！

Answer 5

这是一个使用 javascript/jQuery 的opacity和transition CSS 属性淡化background-image的演示：

 $( document ).ready(function() { $( "#textarea" ).focusin(function(){ $( "#blur" ).css({ "opacity": "1.0", "transition": "opacity 600ms ease-in-out" }); }).focusout(function(){ $( "#blur" ).css({ "opacity": "0", "transition": "opacity 600ms ease-in-out" }); }); });

 body { background-size: cover; background-image: url("https://vpsland.com/blog/wp-content/uploads/2016/04/linux-vps-benefits-g.jpg"); } #textarea { width: 50%; } #blur { position: absolute; height: 100%; width: 100%; background-size: cover; background-image: url("https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2014/07/linux-overdrive.jpg?q=50&fit=contain&w=1500&h=750&dpr=1.5"); top: 0; left: 0; opacity: 0; z-index: -1; }

 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <input id="textarea" type="text" placeholder="Focus here to trigger the transition..."> <div id="blur"></div>