Помощь с обратным вызовом JQuery

Question

По состоянию на my previous question, у меня есть рабочая анимация, которая затухает в каждом элементе в div slideshow. Проблема в том, что я хочу, чтобы эта анимация продолжалась с самого начала, как только она достигла последнего элемента. Я понял, что это легко и что я просто помещаю бесконечный цикл внутри моей функции JQuery, но по какой-то причине, если я вставляю бесконечный цикл, анимация не отображается и страница зависает. Я также не могу найти что-либо в документации о том, как правильно разместить обратный вызов. Как я могу заставить этот код перезапускать с начала анимации после завершения итерации по каждому объекту и почему бесконечный цикл не подходит для этого?

<div id="slideshow"> 
    <p>Text1</p> 
    <p>Text2</p> 
    <p>Test3</p> 
    <p>Text4</p> 
</div> 

<script> 
$(document).ready(function() { 

var delay = 0; 
$('#slideshow p').each(
    function (index, item) 
    { 
     $(this).delay(delay).fadeIn('slow').delay(800).fadeOut('slow'); 
     delay += 2200; 
    } 
); 

}); 
</script> 

Answer 1

Вы могли бы сделать что-то вроде этого:

$(function() { 
    var d = 2200; 
    function loopMe() { 
    var c = $('#slideshow p').each(function (i) { 
       $(this).delay(d*i).fadeIn('slow').delay(800).fadeOut('slow'); 
      }).length; 
    setTimeout(loopMe, c * d); 
    } 
    loopMe(); 
}); 

You can give it a try here.

Вместо того, чтобы не отставать от delay, вы можете просто несколько его по текущему индексу в цикле ... так как первый индекс равен 0, первый из них не будет отложен вообще, а затем в 2200 м раз больше суммы элементов позже, повторите цикл. В приведенном выше коде d есть задержка, поэтому он легко настраивается, и c - это количество элементов.

Answer 2

Это решение, на мой взгляд, более элегантное, также более естественное, его легче контролировать, правильно редактировать значения задержек и т. Д. Я надеюсь, вам понравится.

$(document).ready(function() { 
    var elementsList = $('#slideshow p'); 
    function animationFactory(i) { 
     var element = $(elementsList[i % elementsList.length]); 
     return function() { 
      element.delay(200).fadeIn('slow').delay(800).fadeOut('slow', animationFactory(i + 1)); 
     }; 
    } 
    animationFactory(0)(); 
});