setTimeoutを使用してアイテムを段階的にフェードアウトする

Question

これは以前に尋ねられたことです。私は研究をしましたが、これにはまだ問題があります。ここに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（）を試みたが、同じ問題に遭遇した。私はタイマーが動作していないと思う。

Answer 1

setTimeout機能における第二paramはミリ秒単位の遅延時間です。 だから、私は、カウントをより細かく制御したいので、私は、以下のソリューションで行くと思うよ1500

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

Answer 2

多分1.5msで気付くのに十分ではありませんか？ = 1秒

Answer 3

1000msでは、あなたはjQueryの各反復カウンタを持って、より良いものを使用します。

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

DEMO