更改列表和循环中元素的类

Question

我对脚本有点麻烦。我有基本的想法，但不能将它翻译成代码。

下面是它应该做到：

我使用Animate.CSS，我有以下列表：

<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> 

我想打一个脚本，将：

1. 删除项目中的.invisivel（display：none）类;
2. 将.fadeInLeft类添加到它;
3. 保持可见约三秒;
4. 用.zoomOut替换.fadeInLeft;
5. 使元素再次隐藏;
6. 重复列表中的下一项;

我设法找到一种方法，使淡入动画，然后它结束后，使淡出，并再次进行DIV看不见，用下面的代码：

$(document).ready(function() { 
 
    var animationIn = 'animated fadeInLeft'; 
 
    var animationOut = 'animated zoomOut'; 
 
    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; 
 

 
    $('#imagens-home>li').each(function(){ 
 
    $(this).removeClass('invisivel').addClass(animationIn).on(animationEnd, function(){ 
 
     $(this).removeClass(animationIn).addClass(animationOut).on(animationEnd, function(){ 
 
     $(this).removeClass(animationOut).addClass('invisivel') 
 
     }); 
 
    }); 
 
    }); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="display" id="imagens-home"> 
 
    <li class="invisivel">0</li> 
 
    <li class="invisivel">1</li> 
 
    <li class="invisivel">2</li> 
 
    <li class="invisivel">3</li>  
 
</ul>

但是我找不到一种方法让它遍历列表项。任何帮助，将不胜感激

Answer 1

如果我的理解是否正确，希望每个元素完全动画，下一个动画开始之前。

而不是使用一个循环，它将基本上并行地启动所有的动画，当前一个动画完成动画时，可以使用递归函数遍历元素。

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

 
function animate($items, idx) { 
 
    if (idx >= $items.length) return; // 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); 
 
});

.invisivel { 
 
    display: none; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="display" id="imagens-home"> 
 
    <li class="invisivel">0</li> 
 
    <li class="invisivel">1</li> 
 
    <li class="invisivel">2</li> 
 
    <li class="invisivel">3</li> 
 
</ul>