使用jQuery淡入一长串项目

我想用jQuery一个接一个地淡出一个项目列表.

我的HTML:

 h
 e
 l
 l
 o
 
 w
 o
 r
 l
 d
 
 m
 y
 
 n
 a
 m
 e
 
 i
 s 

我可以像这样写我的JS,但它不会真正优化:

$(document).ready(function() {

    $('span').hide();

    $(window).load(function() {
        ('div span:nth-child(1)').fadeIn( function() {
             ('div span:nth-child(2)').fadeIn( function() {
                 ('div span:nth-child(3)').fadeIn( function() {
                    // etc... 
                });
            });
        });

    });

});

如何写出"当一个跨度消失,淡入下一个"时？

而不是针对每个span使用nth-child(),使用.each()循环每个span.以下将推迟每个fadeIn()发生一个接一个.只需更改延迟值即可修改速度:

JS小提琴

$('div span').each(function(i) {
  $(this).delay(100 * i).queue(function() {
    $(this).fadeIn().dequeue();
  });
});