Как сделать поочередное появление элементов с задержкой

Question

setTimeout(function() {
  var one = $(".payments__animation-item--one");
  setInterval(function() {
    one.toggleClass("_show");
  }, 2000);
}, 3000);

setTimeout(function() {
  var two = $(".payments__animation-item--two");
  setInterval(function() {
    two.toggleClass("_show");
  }, 2200);
}, 3000);

setTimeout(function() {
  var three = $(".payments__animation-items");
  setInterval(function() {
    three.toggleClass("_show");
  }, 2600);
}, 3000);

.payments__animations-block {
  display: flex;
  align-items: center;
  column-gap: 57px;
}

.payments__animation-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #6c63ff;
  transition: all 500ms cubic-bezier(0.25, 0.25, 0.75, 0.75);
  transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
}

.payments__animation-items {
  position: relative;
  display: none;
  align-items: center;
  column-gap: 57px;
}

.payments__animation-items._show {
  display: flex;
}

.payments__animation-item--one {
  display: none;
}

.payments__animation-item--one._show {
  display: flex;
}

.payments__animation-item--two {
  display: none;
}

.payments__animation-item--two._show {
  display: flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="payments__left">
  <div class="payments__animations-block">
    <span class="payments__animation-item payments__animation-item--one">
    1</span>
    <span class="payments__animation-item payments__animation-item--two">2</span>
    <div class="payments__animation-items">
      <span class="payments__animation-item payments__animation-item--three">3</span>
      <span class="payments__animation-item payments__animation-item--four">4</span></div>
  </div>
</div>

Помогите заставить работать как нужно. А нужно чтоб при загрузке появлялся первый круг потом через 1.2сек примерно второй потом так же третий(имеется ввиду пара из 3 и 4) потом они примерно столько же видны после чего пропадают и все по новому кругу и так бесконечно.

Answer 1

(function($) {
  $.fn.fadeInDelay = function() {
    var init = function() {
      $(this).hide().delay($(this).data('delay')).fadeIn();
    };
    return this.each(init);
  };
}(jQuery));

setInterval(function() {
  $('.item').fadeInDelay();
}, 7500);

.payments__animations-block {
  display: flex;
  align-items: center;
  column-gap: 57px;
}

.payments__animation-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #6c63ff;
 
}

.payments__animation-items {
  position: relative;
  display: flex;
  align-items: center;
  column-gap: 57px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="payments__left">
  <div class="payments__animations-block">
    <span class="payments__animation-item item" data-delay="1000">1</span>
    <span class="payments__animation-item item" data-delay="3000">2</span>
    <div class="payments__animation-items item" data-delay="5000">
      <span class="payments__animation-item">3</span>
      <span class="payments__animation-item">4</span></div>
  </div>
</div>

ПОЛЬЗУЙТЕСЬ

БЛОГ НА HUSL

Как сделать поочередное появление элементов с задержкой

Ответы (1 шт):