How to reduce nested callbacks in javascript/jquery

Question

I've been tasked with rewriting this terrible piece of code which is meant to sequentially fade in layers on a map (they are all transparent pngs) on a web page. It needs to operate in a sequence, then loop back to the start where no layers are visible, and fade back in one at a time. This sequence should repeat itself forever.

I'm not really sure what the most recommended way of doing this is in javascript and interested what stack overflow has to say.

There has to be a better way than this! Am interested in pros/cons of any methods.

setInterval(function(){
    $("#layer-1").fadeIn(1000, function() {
      $("#layer-2").fadeIn(1000, function() {
        $("#layer-3").fadeIn(1000, function() {
          $("#layer-4").fadeIn(1000, function() {
            $("#layer-5").fadeIn(1000, function() {
              $("#layer-6").fadeIn(1000, function() {
                $("#layer-7").fadeIn(1000, function() {
                  $("#layer-8").fadeIn(1000, function() {
                    // pause for 2 seconds, then reset and hide all layers:
                    $("#home-map .layer").delay(2000).fadeOut();
                  });
                });
              });
            });
          });
        });
      });
    });
  }, 10000)

Edit: The reason I think this is different to other answers is because I was trying to set things up in an infinite loop, as well as chaining the animations. There are lots of approaches to solving callback hell in javascript and its a very common sticking point, so no doubt there will be similar questions.

Answer 1

use a class instead of ids, then loop through them and add delay based on their index

var layers = $(".layer").length;

function foreverLoop() {

  $(".masterLayer").show();
  $(".layer").hide();

  $(".layer").each(function(index) {
    $(this).delay(1000*index).fadeIn(1000);
  });
  
  $(".masterLayer").delay(1000*layers + 2000).fadeOut(1000);
  
  setTimeout("foreverLoop()", 1000*layers + 3000 + 500);
}

foreverLoop();

.layer {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="masterLayer">
  <div class="layer">layer 1</div>
  <div class="layer">layer 2</div>
  <div class="layer">layer 3</div>
  <div class="layer">layer 4</div>
  <div class="layer">layer 5</div>
  <div class="layer">layer 6</div>
</div>