Как использовать setInterval () внутри для l oop в списке изображений

Question

В настоящее время я пытаюсь упорядочить несколько изображений, постепенно изменяя непрозрачность каждого изображения, чтобы создать анимацию.

В настоящее время каждый раз он переходит к последнему изображению и пропускает все другие изображения.

Мой код выглядит следующим образом:

var images = document.getElementsByClassName("sequenceImage");

for (var i = 0; i < images.length; i++) {
  (function(i) {
    setInterval(function() {
      images[i].style.opacity = 1;
    }, 500)
  })(i);
}

.sequenceImage {
  opacity: .5
}

<img class="sequenceImage" src="https://via.placeholder.com/50/0000FF/808080?Text=image1" /><br>
<img class="sequenceImage" src="https://via.placeholder.com/50/0000FF/808080?Text=image2" /><br>
<img class="sequenceImage" src="https://via.placeholder.com/50/0000FF/808080?Text=image3" /><br>
<img class="sequenceImage" src="https://via.placeholder.com/50/0000FF/808080?Text=image4" /><br>
<img class="sequenceImage" src="https://via.placeholder.com/50/0000FF/808080?Text=image5" /><br>

Answer 1

Немного здесь:

1. function(i) измените i на другое имя, чтобы сделать его отличным и уберите любую путаницу для будущих разработчиков
2. Тогда вместо setInterval используйте setTimeout, так как вы установите opacity только один раз.
3. Затем, наконец, умножьте индекс на задержку setTimeout, чтобы добавить эффект постепенного увеличения.

Демо:

var images = document.getElementsByClassName("sequenceImage");

for (var i = 0; i < images.length; i++) {
  (function(idx) {
    setTimeout(function() {
      images[idx].style.opacity = 1;
    }, 500 * (idx + 1))
  })(i);
}

.sequenceImage {opacity: .5; transition: opacity 0.4s;margin-right:10px}
body{display:flex}

<img class="sequenceImage" src="https://via.placeholder.com/50/0000FF/808080?Text=image1" /><br>
<img class="sequenceImage" src="https://via.placeholder.com/50/0000FF/808080?Text=image2" /><br>
<img class="sequenceImage" src="https://via.placeholder.com/50/0000FF/808080?Text=image3" /><br>
<img class="sequenceImage" src="https://via.placeholder.com/50/0000FF/808080?Text=image4" /><br>
<img class="sequenceImage" src="https://via.placeholder.com/50/0000FF/808080?Text=image5" /><br>