循环动画一次启动，而不是一个接一个

Question

我有一堆不透明度为0的图像。它们大小相同，位置完全在彼此的顶部。我想把它们一个接一个地淡化，这样它们就会一个接个地出现在另一个上面。我使用的是jquery/javascript。到目前为止，我所尝试的一切都让它们完全消失了，而不是一个接一个。有什么建议吗？

html:

<div class="img-container">         
<img src="img/stacked8.jpg" class="stacked" id="stacked8" />
<img src="img/stacked7.jpg" class="stacked" id="stacked7"  />
<img src="img/stacked6.jpg" class="stacked" id="stacked6"  />
<img src="img/stacked5.jpg" class="stacked" id="stacked5"  />
<img src="img/stacked4.jpg" class="stacked" id="stacked4"  />
<img src="img/stacked3.jpg" class="stacked" id="stacked3"  />
<img src="img/stacked2.jpg" class="stacked" id="stacked2"  />
<img src="img/stacked1.jpg" class="stacked" id="stacked1" />
<img src="img/stacked0.jpg" />      
</div>

css：

.img-container {
width: 100%;
height: auto;
position: relative;
}
.img-container .stacked {
position: absolute;
left: 0;
top: 0;
opacity: 0;
}

带航路点的jquery：

var waypoint = new Waypoint({
element: document.getElementById('start-stack'),
handler: function(direction) {
if (direction == 'down') {
doLoop();
}
if (direction == 'up') {


}
}, offset: '75%'

});

function doLoop() {
for (var i=0; i<8; i++) {
(function(i) {
setTimeout(function() { $('#stacked' + i).animate({'opacity': '1'}, 1000); }, 100 * i);
})(i);
}
}

Answer 1

我可以为您提供使用CSS转换而不是设置不透明度动画吗。使用具有opacity:1的类，并根据您希望可见的图片进行切换。

function doLoop() {
for (var i = 1; i <= 8; i++) {
(function(i) {
setTimeout(function() {
$('.stacked').removeClass("active");
$('#stacked' + i).addClass("active");
}, 250 * i);
})(i);
}
}
doLoop()

.img-container {
width: 100%;
height: auto;
position: relative;
}
.img-container .stacked {
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: 250ms all;
}
.img-container .stacked.active {
opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img-container">
<img src="https://picsum.photos/id/237/320/200" class="stacked" id="stacked8" />
<img src="https://picsum.photos/id/236/320/200" class="stacked" id="stacked7" />
<img src="https://picsum.photos/id/235/320/200" class="stacked" id="stacked6" />
<img src="https://picsum.photos/id/234/320/200" class="stacked" id="stacked5" />
<img src="https://picsum.photos/id/233/320/200" class="stacked" id="stacked4" />
<img src="https://picsum.photos/id/232/320/200" class="stacked" id="stacked3" />
<img src="https://picsum.photos/id/231/320/200" class="stacked" id="stacked2" />
<img src="https://picsum.photos/id/230/320/200" class="stacked" id="stacked1" />
<img src="https://picsum.photos/id/229/320/200" />
</div>