Question

I would like to know how to make the below code loop, I know I need some sort of callback/setInterval but how do I implement this? Many thanks!

$('.1').fadeIn(2500, function() {
    $('.2').fadeIn(2500, function() {
        $('.3').fadeIn(2500, function() {
            $('.3').fadeOut(2500, function() {
                $('.2').fadeOut(2500, function() {
                    $('.1').fadeOut(2500, function() {
                    });
                });
            });
        });
    });
});

P.S. This code runs on document ready

Answer 1

Based on the OP’s comments this should be an infinite loop of fading in an out. Try the following

(function () {
  var all = [1, 2, 3];
  var rev = all.reverse();

  var doFadeOut = function (index) {
    $('.' + rev[index]).fadeOut(2500, function () {
      index++;
      if (index < rev.length) {
        doFadeOut(index);
      } else {
        doFadeIn(0);
      }
    });
  };

  var doFadeIn = function (index) {
    $('.' + all[index]).fadeIn(2500, function () {
      index++;
      if (index < all.length) {
        doFadeIn(index);
      } else {
        doFadeOut(0);
      }
    });
  };

  doFadeIn(0);
})();