Jquery 在setTimeout上使用fadeIn淡出？

我可以在设置超时时使用fadeIn或fadeOut吗？我有3个背景图像在一个数组中，我想慢慢淡入每一个

这是我的代码，工作很好，我只是希望过渡是缓慢的，而不是超快，因为它是现在

$(function () {
var nextImage = $('.main-background');
var backgrounds = [
  'url(<?= $image_url ?>/big-main-background-1.jpg)', 
  'url(<?= $image_url ?>/big-main-background-2.jpg)', 
  'url(<?= $image_url ?>/big-main-background-3.jpg)'];

var current = 0;

function nextBackground() {
    nextImage.css(
        'background',
    backgrounds[current = ++current % backgrounds.length]);

    setTimeout(nextBackground, 4000);
}
setTimeout(nextBackground, 4000);
nextImage.css('background', backgrounds[0]);
});

$（函数（）{
var nextImage=$（'.main background'）；
变量背景=[
'url（/big-main-background-1.jpg）'，
'url（/big-main-background-2.jpg）'，
'url（/big-main-background-3.jpg）'；
无功电流=0；
函数nextBackground（）{
nextImage.css(
“背景”，
背景[current=++current%backgrounds.length]）；
设置超时（下一个背景，4000）；
}
设置超时（下一个背景，4000）；
css（'background'，backgrounds[0]）；
});

使用jQuery功能，您可以在那里指定持续时间。

请检查此小提琴：

这里有一个不同的方法，如果你有任何问题，你可以随意提问

只需将样式或内容替换为您的背景即可

如果要将此应用于容器，请将以下结构插入主容器，并最大化其宽度和高度

结构如下：

<div class="container">
    <div style="background:red"></div>
    <div style="background:yellow"></div>
    <div style="background:blue"></div>
</div>

下面是CSS：

.container {
    position:relative;
}

.container > div {
    width:200px;
    height:200px;
    top:0;
    left:0;
    position:absolute;
    opacity:0;
    transition:1s all ease;
}

.container > div.show {
    opacity:1;
}

---

基本上，CSS类

.show

声明元素必须是不透明的。

.container div

设置了一种透明的样式，并且有一个过渡。当切换

.show

时，2

一起淡入淡出，产生了效果

我认为你不能通过css淡入背景。但是你可以通过使用多个实际图像相互叠加并改变它们的不透明度来做到这一点。这意味着，在图像1（不透明度为1）以及图像2和图像3（不透明度为0）上。然后，当图像2显示不透明度为1时，对于图像1和图像3，不透明度变为0。像这样的？好的，给我几分钟试试。我将不得不修改我的所有HTML，因为在我的主div中有其他带有文本的div，您提供的代码将使用文本和h1标记调用我的div。

.container {
    position:relative;
}

.container > div {
    width:200px;
    height:200px;
    top:0;
    left:0;
    position:absolute;
    opacity:0;
    transition:1s all ease;
}

.container > div.show {
    opacity:1;
}