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

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); 
    }); 

});