javascript - 淡入不同的文本行

Question

我正在尝试淡入三行单独的文本，每一行都比最后一行稍微晚一点。我发现了如何淡化单行，以及如何延迟单行，但无论我尝试什么，都无法将两者结合起来。所有的 JS 研究都是针对按钮选择器的 .fadeIn('slow') 的，无论尝试什么都不适用于下面的代码。任何建议表示赞赏。

function showText(id,delay){
  var elem=document.getElementById(id);
  setTimeout(function(){elem.style.visibility='visible';},delay*1000)
}

window.onload = function(){
  showText('delayedText1',1);
  showText('delayedText2',2);
  showText('delayedText3',3);
  showText('delayedText4',4);
}

<h1 id="delayedText1" style="visibility:hidden">First line fades in</h1>
<h1 id="delayedText2" style="visibility:hidden">slightly later this fades in</h1>
<h1 id="delayedText3" style="visibility:hidden">and last this line fades in</h1>

http://jsfiddle.net/k4h94Lob/1/

Answer 1

如果你认为你会在你的元素中做更多的动画，我强烈推荐使用 Animate.css .那么完全不使用 JavaScript 来延迟怎么样，并使用一些 CSS 使其真正简单？

<h1 id="delayedText1" class="animated fadeIn delay-1">First line fades in</h1>
<h1 id="delayedText2" class="animated fadeIn delay-2">slightly later this fades in</h1>
<h1 id="delayedText3" class="animated fadeIn delay-3">and last this line fades in</h1>

例如:

.delay-1 {
    -webkit-animation-delay: 300ms;
    -moz-animation-delay: none;
    animation-delay: 300ms;
}
.delay-2 {
    -webkit-animation-delay: 600ms;
    -moz-animation-delay: none;
    animation-delay: 600ms;
}
.delay-3 {
    -webkit-animation-delay: 900ms;
    -moz-animation-delay: none;
    animation-delay: 900ms;
}

Demo JSFiddle