如何以淡入/淡出的方式逐個顯示列表元素

Question

我想逐個顯示列表元素。在頁面加載時顯示第一個元素，然後過了一段時間第一個元素淡出，第二個元素淡入。

有什麼方法可以解決這個問題？

Answer 1

你可以嘗試這樣的事情： https://jsfiddle.net/u0fq3m5y/2/

<div>div1</div> 
<div>div2</div> 
<div>div3</div> 

$(document).ready(function() { 
    var delay = 3000; 

    $('div').each(function(i, e) { 
    $(e).delay(i * delay).fadeIn().delay(delay).fadeOut(); 
    }); 
}); 

Answer 2

假設你已經有元素的標準列表和他們最初是隱藏的，這樣的事情可以工作：

$(document).ready(function() { 

    $('#listId').children('li').each(function() { 
     var appearTime = $(this).index() * 2000; 
     setTimeout(function() { 
      $(this).fadeIn(200); 
     }, appearTime); 
    }); 

});