Jquery循环动画fadeIn

我正在尝试加载三个图像，每个图像都有一个动画fadeIn延迟，我想要的是将它们全部淡入，然后隐藏它们各自的延迟。然后再重复一遍。 动画流示例： 1.FadeIn image1延迟=0s/image2延迟=0.5s/image3延迟=1/s 2.在1.5秒内隐藏所有三个图像 3.在2s上重复FadeIn 下面是我所做的，我正在使用setInterval中的添加和删除类。

$（.tri1”）.inViewport（函数（px）{
如果（px>0）{
fadead（）；
setInterval（函数（）{
fadead（）；
}, 5500);
setInterval（函数（）{
fadeRemove（）；
$（.tri1”）.css（'opacity'，'0'）；
$（“.tri2”）.css（'opacity'，'0'）；
$（“.tri3”）.css（'opacity'，'0'）；
}, 5400);
}
});
函数fadead（）{
$（“.tri1”）.addClass（“fadeIn”）；
$（“.tri2”）.addClass（“fadeIn”）；
$（“.tri3”）.addClass（“fadeIn”）；
}
函数fadeRemove（）{
$（“.tri1”）.removeClass（“fadeIn”）；
$（“.tri2”）.removeClass（“fadeIn”）；
$（“.tri3”）.removeClass（“fadeIn”）；
}

.tri2{
动画延迟：0.5s；
}
.tri3{
动画延迟：1s；
}

---

我建议您实现一个没有第三方要求的简单javascript代码。创建一个函数并将其用作淡出的回调函数，当元素淡出时将调用该函数

您应该尝试以下方法：

1） Javascript代码

var $elem = $('#main .trip'), l = $elem.length, i = 0;

function go() {
    $elem.eq(i % l).fadeIn(700, function() {
        $elem.eq(i % l).fadeOut(700, go);
        i++;
    })
}

go();

2） HTML代码

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<div id="main">
    <div id="1" class="trip">Item1</div>
    <div id="2" class="trip">Item2</div>
    <div id="3" class="trip">Item3</div>
</div>

演示：

---

您可以使用不同的jQuery版本，详细信息如下：

您只能使用CSS动画：

#img容器img{
边框：5px纯橙；
高度：100px；
宽度：100px；
动画持续时间：4s；
动画延迟：0s；
动画迭代次数：无限；
}
#img容器img#pic1{
动画名称：fadeIn1；
}
#img容器img#pic2{
动画名称：fadeIn2；
}
#img容器img#pic3{
动画名称：fadeIn3；
}
@关键帧fadeIn1{
0%{不透明度：0；}
12.5%{不透明度：1；}
90%{不透明度：1；}
100%{不透明度：0；}
}
@关键帧fadeIn2{
0%{不透明度：0；}
12.5%{不透明度：0；}
25%{不透明度：1；}
90%{不透明度：1；}
100%{不透明度：0；}
}
@关键帧fadeIn3{
0%{不透明度：0；}
25%{不透明度：0；}
37.5%{不透明度：1；}
90%{不透明度：1；}
100%{不透明度：0；}
}
.as控制台包装{显示：无！重要；}

先生，谢谢您的回答，但这是我想要实现的输出。当我在编辑器中复制时，此代码可以在小提琴中工作，但不起作用。请提供完整的工作代码。您需要在HTML中包含jQuery库。在页面的页眉上，需要包含jQuery javascript文件。我编辑了我的答案，请看HTML代码区。谢谢！这是我的想法，我尝试过这样做，但我的代码不是那么干净。谢谢，兄弟！

.trip { display: none}