Javascript CSS在图片中一个接一个地消失

我想一张一张地展示3-4张图片。我试着先把照片藏起来。当我滚动到某个地方时，它会在图片中一个接一个地淡出。但是，问题是第二张图片一开始不会隐藏，但会在1s后延迟淡入。css动画延迟有什么问题

$（窗口）。滚动（函数（）{
var body=$（“body”）.scrollTop（）；
如果（正文>=1000）{
$（“圆圈”）.removeClass（“圆圈隐藏”）.addClass（“圆圈显示”）；
$（“#circle1”）.removeClass（“circle_hidden”）.addClass（“circle1_display”）；
var classname=$（“#圈”）.attr（“类”）；
log（类名）；
}
});
.circle\u隐藏{
宽度：50%；
可见性：隐藏；
}
.圆形显示{
宽度：50%；
动画名称：fadeIn；
动画持续时间：3s；
能见度：可见；
}
.圆形1_显示器{
宽度：50%；
动画名称：fadeIn；
动画持续时间：3s；
动画延迟：0.5s；
能见度：可见；
}
@关键帧动画{
0%{变换：translateY（50%）；背景色：红色}
100%{tranform:translateY（70%）；背景色：蓝色}
}
@关键帧淡入淡出{
0%{不透明度：0}
100%{不透明度：1}
}

专题1

我认为问题在于
#circle1
元素的不透明度在500毫秒延迟期间设置为100%。
将
opacity:0%
添加到
circle1\u display
类似乎可以解决这一问题，但该元素在动画完成后隐藏

您可以在JavaScript中添加延迟，例如：

CSS

JavaScript:

setTimeout(function(){
     $("#circle1").removeClass("circle_hidden").addClass("circle1_display");
}, 500);

将此setimeout添加到if语句中？@soul299 Yes并且只在其函数中添加
#circle1
元素，保持
#circle
现在的状态。将setimeout函数添加到if语句中。它不起作用。同样的情况。@soul299您可能还没有删除
动画延迟：0.5s圆圈1\u显示
类的code>。另外，请确保动画在启动之前没有运行。是的。。。。我没有删除动画延迟：0.5s。。。那么动画延迟和延迟编码之间有什么不同呢
setTimeout(function(){
     $("#circle1").removeClass("circle_hidden").addClass("circle1_display");
}, 500);