Каков наиболее эффективный способ создания итеративной функции Fade-In-Out с помощью jquery?

Question

Я кодировал функцию постепенного исчезновения в jquery, которая работает хорошо, но выглядит так, как будто есть более элегантный способ ее написания. Начальная непрозрачность установлена ​​в нуль. Вот что у меня есть:

 $('span[data-i18n="text.about"]').click(function () {
    $('#one').fadeTo(2000, 1, function() {
        $('#one').fadeTo(2000, 0, function() {
            $('#two').fadeTo(2000, 1, function() {
                $('#two').fadeTo(2000, 0, function() {
                    $('#three').fadeTo(2000, 1, function() {
                        $('#three').fadeTo(2000, 0, function() {
                            $('#four').fadeTo(2000, 1, function() {
                                $('#four').fadeTo(2000, 0,  function() {
                                    $('#five').fadeTo(2000, 1, function() {
                                        $('#five').fadeTo(2000, 0, function() {
                                            $('#six').fadeTo(2000, 1, function() {
                                                $('#six').fadeTo(2000, 0, function() {
                                                    $('#seven').fadeTo(2000, 1, function() {
                                                        $('#seven').fadeTo(2000, 0, function() {
                                                            $('#eight').fadeTo(2000, 1, function() {
                                                                $('#eight').fadeTo(2000, 0);         
                                                            }); 
                                                        });        
                                                    });            
                                                });            
                                            });         
                                        });          
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    })
});

Есть идеи, как улучшить или укоротить эту функцию?

Answer 1

Поскольку все элементы следуют одинаковому поведению (т. Е. Исчезают в течение двух секунд, затем исчезают в течение двух секунд), вы можете поставить в очередь все анимации в цикле, итеративно с задержкой на четыре секунды для каждого последующего элемента.

Чтобы сделать это проще, вы можете применить общий класс ко всем. Примерно так:

$('span[data-i18n="text.about"]').click(function() {
  $('.fade-queue').each(function(i) {
    $(this).delay(i * 4000).queue(function() {
      $(this).fadeTo(2000, 1).dequeue();
    }).queue(function() {
      $(this).fadeTo(2000, 0).dequeue();
    });
  });
});

div { 
  opacity: 0; 
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span data-i18n="text.about">Click me</span>

<div class="fade-queue" id="one">One</div>
<div class="fade-queue" id="two">Two</div>
<div class="fade-queue" id="three">Three</div>
<div class="fade-queue" id="four">Four</div>
<div class="fade-queue" id="five">Five</div>
<div class="fade-queue" id="six">Six</div>
<div class="fade-queue" id="seven">Seven</div>
<div class="fade-queue" id="eight">Eight</div>

Также обратите внимание, что этот метод больше не использует атрибуты id. Таким образом, его намного проще поддерживать и расширять, так как вы можете просто добавить больше элементов <div class="fade-queue"> в ваш HTML без необходимости изменения кода JS.