使用 setTimeout 逐步淡入项目答案

【问题标题】：Fading in items incrementally using setTimeout使用 setTimeout 逐步淡入项目
【发布时间】：2016-08-18 22:19:58
【问题描述】：

我知道以前有人问过这个问题。我做了研究，但仍然有这个问题。这是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()，但遇到了同样的问题。我认为计时器不起作用。

【问题讨论】：

标签： javascript jquery html css settimeout

【解决方案1】：

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

【讨论】：

哈哈！多么愚蠢！好的，你是对的。谢谢你。另外，感谢其他所有人，但我会接受这个作为答案，因为它提供了代码，并使用了我已经拥有的。

【解决方案2】：

也许 1.5 毫秒还不足以让您注意到？ 1000 毫秒 = 1 秒

【讨论】：

【解决方案3】：

你在 jQuery 的 each 中有一个迭代计数器，最好使用它：

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

DEMO

【讨论】：

我想我会采用下面的解决方案，因为我想更好地控制计数。我实际上正在考虑从 -1500 开始 i 以便第一个立即开始。我宁愿拥有这种灵活性，但又不会变得太复杂。
@JordanCarter 您的选择，但从 -1500 开始是行不通的，使用此解决方案第一个立即开始，因为第一次迭代时 iterationCount 为 0
如果我从 -1500 开始，它确实有效。实际上，我现在喜欢你的解决方案。两者都是很好的解决方案，谢谢。