Альтернатива анимированному GIF с использованием jQuery для анимации последовательности изображений

Question

Я собрал этот очень простой код jQuery для анимации последовательности изображений. Работает отлично. Вы можете просмотреть его здесь .

Но сейчас я пытаюсь обновить код, чтобы он мог работать с несколькими последовательностями изображений одновременно, если у него есть собственный класс, на который есть ссылка в коде jQuery. Поэтому я обновил его - смотрите ниже. К сожалению, мои обновления не работают. Ребята, можете ли вы помочь мне решить эту проблему? Заранее спасибо!

let aniOne = $(".animation.first img");
let aniTwo = $(".animation.second img");
let currentImg = 0;

function changeImg(allImg){
  $(allImg[currentImg]).fadeOut(0, function(){
    
  if(currentImg == allImg.length -1){
    currentImg = 0;
  }else {
    currentImg++;
  }
    $(allImg[currentImg]).fadeIn(0)});
  
  
}

setInterval(changeImg(aniOne), 0050);

setInterval(changeImg(aniTwo), 0050);

.animation {
  width: 30%;
}

.animation img {
  display: none;
}

.animation img:first-of-type {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="animation first">
    <img src="http://s23.postimage.org/t57meexkb/horse_1.png">
    <img src="http://s23.postimage.org/i86apnasr/horse_2.png">
    <img src="http://s23.postimage.org/6kc8v3lnv/horse_3.png">
    <img src="http://s23.postimage.org/w4ej1j71n/horse_4.png">
    <img src="http://s23.postimage.org/ddclrdch7/horse_5.png">
    <img src="http://s23.postimage.org/nbxkdulwr/horse_6.png">
    <img src="http://s23.postimage.org/phrv8cpd7/horse_7.png">
    <img src="http://s23.postimage.org/n1un88wob/horse_8.png">
    <img src="http://s23.postimage.org/9yz0oz6gb/horse_9.png">
    <img src="http://s23.postimage.org/6gn0sl5kb/horse_10.png">
    <img src="http://s23.postimage.org/vnxwsu8ob/horse_11.png">
    <img src="http://s23.postimage.org/bhuetyd0r/horse_12.png">
    <img src="http://s23.postimage.org/imc82zka3/horse_13.png">
    <img src="http://s23.postimage.org/auvi4fg4r/horse_14.png">
</div>

<div class="animation second">
  <img src="https://i.imgur.com/5QGZklx.png">
  <img src="https://i.imgur.com/5QGZklx.png">
  <img src="https://i.imgur.com/i1oLaES.png">
</div>

Answer 1

Как сказал Крис Дж:

В рабочем коде используется setInterval(changeImg, 50), который будет работать нормально. Проблема с вашей текущей попыткой - setInterval(changeImg(aniOne), 50), которая оценивает вызов на changeImg(aniOne), а затем вызов setInterval(undefined, 50) (так как changeImg ничего не возвращает). Если вы хотите, чтобы это работало, вам нужно превратить changeImg в функцию, которая возвращает функцию. - Крис G

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

let aniOne = $(".animation.first img");
let aniTwo = $(".animation.second img");
let num1 = 0;
let num2 = 0;

function changeImg(allImg, num){
  function main(){
    $(allImg[num]).fadeOut(0, function(){

    if(num == allImg.length -1){
      num = 0;
    }else {
      num++;
    }
      $(allImg[num]).fadeIn(0)});
  }
  return main;
}

setInterval(changeImg(aniOne, num1), 0050);

setInterval(changeImg(aniTwo, num2), 0050);

.animation {
  width: 30%;
}

.animation img {
  display: none;
}

.animation img:first-of-type {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="animation first">
    <img src="http://s23.postimage.org/t57meexkb/horse_1.png">
    <img src="http://s23.postimage.org/i86apnasr/horse_2.png">
    <img src="http://s23.postimage.org/6kc8v3lnv/horse_3.png">
    <img src="http://s23.postimage.org/w4ej1j71n/horse_4.png">
    <img src="http://s23.postimage.org/ddclrdch7/horse_5.png">
    <img src="http://s23.postimage.org/nbxkdulwr/horse_6.png">
    <img src="http://s23.postimage.org/phrv8cpd7/horse_7.png">
    <img src="http://s23.postimage.org/n1un88wob/horse_8.png">
    <img src="http://s23.postimage.org/9yz0oz6gb/horse_9.png">
    <img src="http://s23.postimage.org/6gn0sl5kb/horse_10.png">
    <img src="http://s23.postimage.org/vnxwsu8ob/horse_11.png">
    <img src="http://s23.postimage.org/bhuetyd0r/horse_12.png">
    <img src="http://s23.postimage.org/imc82zka3/horse_13.png">
    <img src="http://s23.postimage.org/auvi4fg4r/horse_14.png">
</div>

<div class="animation second">
  <img src="https://i.imgur.com/5QGZklx.png">
  <img src="https://i.imgur.com/5QGZklx.png">
  <img src="https://i.imgur.com/i1oLaES.png">
</div>