javascript - 使用 setTimeout 逐渐淡入元素

Question

我意识到之前有人问过这个问题。我做了研究，但我仍然对此有疑问。这是 HTML。我需要每个文本 block 逐渐淡入:

<div id="home-landing-text">
    <span class="block">When A Building Is</span> 
    <span class="block">The Last of Its Kind,</span>
    <span class="block">It Deserves To Be Truly</span>
    <span class="block">Memorable.</span>
</div>

还有 jQuery:

var i = 0;
$('#home-landing-text span').each( function () {
    i = i + 1.5;
    var that = $(this);
    setTimeout( function () {
        that.css('opacity', 1);
    }, i );
});

还有 CSS:

#home-landing-text span{
    opacity: 0;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}

它们一起淡入淡出。关于为什么的任何线索？ PS，fadeIn() 不起作用，因为它将它们变成内联 block ，但它们必须是 block 。我试过 fadeTo()，但遇到了同样的问题。我认为计时器不工作。

Answer 1

setTimeout 函数中的第二个参数是以毫秒为单位的延迟。所以你应该将 i 增加到 1500。

var i = 0;
$('#home-landing-text span').each( function () {
    i = i + 1500;
    var that = $(this);
    setTimeout( function () {
        that.css('opacity', 1);
    }, i );
});