更改列表和循環中元素的類

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>