如何逐个显示列表元素淡入/淡出

Question

我想逐个显示列表元素。在页面加载时，显示第一个元素，然后在一段时间后第一个元素淡出，第二个元素淡入。

有什么方法可以解决这个问题？

Answer 1

假设您已经有一个标准的元素列表并且它们最初是隐藏的，那么这样的东西可以起作用：

$(document).ready(function () {

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

});

Answer 2

您可以尝试这样的事情： 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();
  }); 
});