第一次循环后功能错误

Question

我有这个功能，其目的是按顺序更改列表中的项目类别，然后重复。使用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个图像。然而，在第一个循环之后，它没有fadeOut，并且直接切换到下一个图像，跳过动画。这发生了两次，然后代码停止工作。可能是什么原因？