Animated gif alternative using jQuery to animate an image sequence

Question

I put together this very simple jQuery code to animate a sequence of images. It works perfectly. you can view it here.

But now I am trying to update the code so it could work on multiple image sequences at once as long as it has its own class that is referenced in the jQuery code. So I updated it - view below. Unfortunately my updates are not working. Can you guys help me resolve this issue? Thank you in advance!

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

As Chris G stated above:

The working code uses setInterval(changeImg, 50) which will work fine. The problem with your current attempt is setInterval(changeImg(aniOne), 50) which evaluates to a call to changeImg(aniOne), then a call to setInterval(undefined, 50) (since changeImg doesn't return anything). If you want this to work, you need to make changeImg into a function that returns a function. – Chris G

After we add these problems, we then have the issue of both animations sharing the currentImg variable, so instead I made two different variables and passed them along with the images. You can handle this many different ways.

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>