淡入不同的文本行

Fade in different lines of text

本文关键字：文本 淡入      更新时间：2023-09-26

我试图淡入三行单独的文本，每行文本都比上一行稍晚。我已经发现了如何淡化一行，以及如何延迟一行，但无论我尝试什么，都无法将两者结合起来。 所有的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/

如果你认为你会在你的项目中做更多关于动画的事情，我强烈建议你使用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;
}

演示 JSFiddle

您可以为此利用 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>

也许这就是您正在寻找的： 演示

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

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

<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>

演示和一定要改变 

visibility:hidden with display:none;`
相关文章：