使用setTimeout逐漸淡入物品

我意識到這已被問到過。我做了研究，但我仍然有這個問題。這是HTML。我需要每個文本塊以增量淡入：使用setTimeout逐漸淡入物品

<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（），但遇到了同樣的問題。我認爲計時器不工作。

來源

2016-08-18 Jordan Carter

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

來源

2016-08-18 14:15:47 user3063182

哈哈！多麼愚蠢！好吧，你是對的。謝謝。另外，感謝所有其他人，但我會接受這個答案，因爲它提供了代碼，並且使用了我已有的東西。 –

也許1.5ms是不夠的，你會注意到？ 1000毫秒= 1秒

來源

2016-08-18 14:09:12 Danial

您有jQuery的每一個迭代計數器，更好地利用：

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

DEMO

來源

2016-08-18 14:13:13 baao

我想我會與下面的解決方案去了，因爲我想在計數更好的控制。我實際上正考慮在-1500開始我，以便第一個立即開始。如果不太複雜，我寧願擁有這種靈活性。 –

@JordanCarter你的選擇，但在-1500開始是不會工作，並與這種解決方案的第一個立即開始，因爲迭代計數是0爲第一次迭代 – baao

它確實工作，如果我開始我在-1500。其實，我現在喜歡你的解決方案。兩者都是非常好的解決方案，謝謝。 –

使用setTimeout逐漸淡入物品

回答

相關問題