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

    });

});

如何写出“当一个跨度消失，淡入下一个”时的内容？

Answer 1

使用span循环浏览每个nth-child()，而不是使用.each()定位每个span。以下内容将延迟每个fadeIn()一个接一个地发生。只需更改延迟值即可修改速度：

JS Fiddle

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

Answer 2

两个递归解决方案：

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())

开始

Answer 3

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

如果你想隐藏页面加载的所有跨度，请使用CSS，一旦DOM准备好，迭代你的跨度并做fadein。

给你的div一个id（#parent）并使用这个CSS来隐藏

中的所有范围

#parent > span {

    display: none;
}

jQuery

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

使用jQuery淡入一长串项目

3 个答案: