jQuery последовательность появления и исчезновения со многими элементами?

Question

Это работает:

        $( document ).ready(function() {
            var $element1 = $('img.hidden');
            var $element2 = $('#1.inner');
            setTimeout(function() {
                function fadeInOut () {
                    $element1.fadeIn(2000, function () {
                        $element1.delay(2000).fadeOut(2000, function () {
                            $element2.fadeIn(2000, function () {
                                $element2.delay(2000).fadeOut(2000, function () {
                                    setTimeout(fadeInOut, 8000);
                                });
                            });
                        });
                    });
                }
                fadeInOut();
            }, 8000);
        });

Но как я могу сделать это с 10-ю элементами без сумасшедшего вложения?

TIA,

Ник.

Answer 1

После воспроизведения вашего кода я попытался сделать пример без вложенности:

$(document).ready(function() {

  var current;

  fadingElements();

  function fadingElements() {
    // set here the time difference until the first fading
    setTimeout(fadeInCurrentElement, 8000);
  }

  function fadeInCurrentElement() {
    current = getNextElement();

    current.fadeIn(2000, function() {
      current.delay(2000).fadeOut(2000, fadingElements);
    });
  }

  function getNextElement() {
    if (current != null && current.length) {
      var next = current.next('.elements');

      if (next.length) {
        return next;
      }
    }

    return $('.elements').eq(0);
  }

  // you can delete the code below
  // that's just to show us at which time we are

  updateTimer();

  function updateTimer() {
    var target = $('#current-time span');
    var timeValue = Math.round((parseFloat(target.text()) + 0.1) * 10) / 10;

    target.text(timeValue.toFixed(1));
    setTimeout(updateTimer, 100);
  }

});

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

<div id="current-time">Timer: <span>0.0</span>s</div>
<hr/>
<div id="first" class="elements" style="display: none;">FIRST</div>
<div id="second" class="elements" style="display: none;">SECOND</div>
<div id="third" class="elements" style="display: none;">THIRD</div>