使用 jQuery 淡入一长串项目

Question

我想在项目列表中淡入淡出，一个接一个，jQuery。

我的HTML：

<div>
 <span>h</span>
 <span>e</span>
 <span>l</span>
 <span>l</span>
 <span>o</span>
 <span></span>
 <span>w</span>
 <span>o</span>
 <span>r</span>
 <span>l</span>
 <span>d</span>
 <span></span>
 <span>m</span>
 <span>y</span>
 <span></span>
 <span>n</span>
 <span>a</span>
 <span>m</span>
 <span>e</span>
 <span></span>
 <span>i</span>
 <span>s</span> 
</div>

我可以这样写我的 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... 
                });
            });
        });

    });

});

怎么写成"when a span has faded in, fade in the next one"这样的东西？

Answer 1

与其使用 nth-child() 定位每个 span，不如使用 .each() 遍历每个 span。以下将延迟每个 fadeIn() 一个接一个地发生。只需更改延迟值即可修改速度：

JS Fiddle

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

Answer 2

您不必将代码包装在 window.load 中，因为您已经在使用 jQuery 文档就绪。

如果您想在页面加载时隐藏所有跨度，请为此使用 CSS，一旦 DOM 准备就绪，遍历您的跨度并执行淡入。

给你的 div 一个 id (#parent) 并使用这个 CSS 来隐藏里面的所有跨度

#parent > span {

    display: none;
}

jQuery

$(function(){
    $("#parent").children("span").each(function(){
        $(this).fadeIn();
    });
});

Answer 3

两种递归解法：

function fadeIn(i) {
    $('div span:nth-child('+ i +')').fadeIn( function() {
        fadeIn(i+1);
    });
}

从 fadeIn(0) 开始。

另一个没有明确索引的工作：

function fadeIn(elem) {
    $(elem).fadeIn(function() {
        fadeIn(elem.next());
    });
}

现在从 fadeIn($('div span').first())

开始

使用 jQuery 淡入一长串项目

Fade in a long list of item with jQuery

javascript

jquery

fadein