使用jQuery淡出一长串项目

Fade in a long list of item with jQuery

本文关键字：项目 jQuery 淡出 使用      更新时间：2023-09-26

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

怎么能写出"当一个跨度消失时，下一个跨度也会消失"这样的话呢？

与其使用nth-child()针对每个span，不如使用.each()循环遍历每个span。以下将延迟每个fadeIn()相继发生。只需更改延迟值即可修改速度：

JS Fiddle

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

两个递归解决方案：

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

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

如果你想在页面加载中隐藏所有的跨度，请使用CSS，一旦DOM准备好，就可以迭代你的跨度并进行渐变。

给你的div一个id（#parent），并使用这个CSS来隐藏中的所有跨度

#parent > span {
    display: none;
}

jQuery

$(function(){
    $("#parent").children("span").each(function(){
        $(this).fadeIn();
    });
});
相关文章：