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

Answer 2

<script>
  $(document).ready(function(){
     var numOfLines = 3;
     var delay = 1000;
     var fadeTime = 1000;
     for (i = 0; i < numOfLines + 1; i++) { 
        $('#delayedText' + i).delay(delay * i).fadeIn(fadeTime);
     }
  });
</script>

DEMO并确保更改

visibility:hidden with display:none;`

Answer 3

也许这就是你要找的东西：DEMO

$(document).ready(function () {
    $('h1').each(function (line) {
        $(this).delay((line++) * 1000).fadeIn();
    });
});

更新：请注意，这适用于任意数量的行。您可以更改速度和延迟时间的淡入淡出。

Answer 4

您可以利用CSS转换。

转换需要一个数值来运行，因此您可以使用opacity样式，而不是visibility：

function showText(id, delay) {
    var elem = document.getElementById(id);
    setTimeout(function () {
        elem.style.opacity = 1;
    }, delay * 1000)
}
window.onload = function () {
    showText('delayedText1', 1);
    showText('delayedText2', 2);
    showText('delayedText3', 3);
    showText('delayedText4', 4);
}

h1{
    opacity:0;
    transition: opacity 0.8s;
}

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

淡入不同的文本行

4 个答案: