Как создать петлевую анимацию с помощью JQuery

Question

Я сидел на этом в течение нескольких часов и не могу понять это.Я пытаюсь создать слайд-шоу (3 слайда), которое повторяется бесконечно.Каждый слайд является ливом внутри #slideshow.Я прошел через это с помощью отладчика, и все переменные были установлены правильно, но я не понимаю, почему анимация на самом деле не происходит.У меня есть это, которое в конечном итоге отображает все изображения на странице:

$(document).ready(function() {
$slideshow = $('#slideshow');

$slideshowItems = $slideshow.find('li');

$slideshowItems.hide();

nextI = function(x) {       
        if ((x+1) < $slideshowItems.length) {
            return x+1;
        }
        else {
            return 0;
        }
    }

animation = function(i) {       
    $slideshowItems.eq(i).fadeIn(500).delay(1000).fadeOut(500, animation(nextI(i)));
}

animation(0);

Если я делаю:

$slideshowItems.eq(0).fadeIn(500).delay(1000).fadeOut(500, 
     $slideshowItems.eq(1).fadeIn(500).delay(1000).fadeOut(500,
         $slideshowItems.eq(2).fadeIn(500).delay(1000).fadeOut(500));

Это работает, как ожидалось, но кажется уродливым и не зацикливается.

Есть идеи, почему я не могу заставить это работать?Я чувствую, что это связано с моими ожиданиями того, как JQuery / JS модифицирует DOM или последовательность, которую браузер использует для выполнения анимации.Спасибо за помощь!

Answer 1

var $slideshowItems = $('#slideshow').find('li'), 
    i = 0;

(function loop() {

    $slideshowItems.eq( i ).fadeIn(500).delay(1000).fadeOut(500, loop);
    i = ++i % $slideshowItems.length;

})();

JSFIDDLE DEMO

Answer 2

Вы должны указать метод обратного вызова, но ваша "animation (nextI (i))" ничего не возвращает, поэтому после завершения затухания ничего не остается.

Как-то так, думаю, сработает:

var animation = function(i) {       
   $slideshowItems.eq(i).fadeIn(500).delay(1000).fadeOut(500, function (){
      animation(nextI(i));
   });
}

Answer 3

Я бы попробовал установить это как функцию и затем использовать setInterval:

setInterval(function(){
    $slideshowItems.eq(0).fadeIn(500).delay(1000).fadeOut(500, function() {
       $slideshowItems.eq(1).fadeIn(500).delay(1000).fadeOut(500, function() {
           $slideshowItems.eq(2).fadeIn(500).delay(1000).fadeOut(500);
       });
    });
}, 6000); // 6000 milliseconds before loops