javascript - 使用setTimeout逐渐淡入元素

我知道这已经被问过了。我做了研究，但是仍然有问题。这是HTML。我需要每个文本块逐渐淡入：

<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（）不起作用，因为它将它们变成内联块，但是它们必须是块。我尝试了fadeTo（），但是遇到了同样的问题。我认为计时器不起作用。

最佳答案

setTimeout函数中的第二个参数是延迟（以毫秒为单位）。
因此，您应该在1500中增加i。

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

关于javascript - 使用setTimeout逐渐淡入元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39020354/