Блог

У меня есть эта функция, целью которой является изменение класса элементов внутри списка по порядку, а затем повторение. Используя предложение члена SO, мой код выглядит следующим образом:

 <ul class="display" id="imagens-home">
            <li class="invisivel"><img src="img/teste/lanche-1.jpg"/></li>
            <li class="invisivel"><img src="img/teste/lanche-2.jpg"/></li>
            <li class="invisivel"><img src="img/teste/lanche-3.jpg"/></li>
            <li class="invisivel"><img src="img/teste/lanche-4.jpg"/></li>
          </ul>
  

Моя функция:

     var animationIn = 'animated fadeInLeft';
var animationOut = 'animated zoomOut';
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

function animate($items, idx) {
  if (idx >= $items.length) idx = 0; // no more items, stop animating

  var $current = $items.eq(idx);
  $current.removeClass('invisivel').addClass(animationIn).on(animationEnd, function() {
    $current.removeClass(animationIn).addClass(animationOut).on(animationEnd, function() {
      $current.removeClass(animationOut).addClass('invisivel');
      animate($items, idx   1); // try animating the next item
    });
  });

$(document).ready(function() {
  animate($('#imagens-home>li'), 0);
});
  

Проблема в том, что код работает по назначению, перебирая 4 изображения. Однако после этого первого цикла он не исчезает, а переходит прямо к следующему изображению, пропуская анимацию. Это происходит дважды, а затем код перестает работать. В чем может быть причина?