Затухание в разных строках текста

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

Для этого вы можете использовать переходы CSS.

Transitions нужно числовое значение функции, так что вы можете использовать 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>

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

UPDATE: Обратите внимание, что это будет работать для любого количества строк. Вы можете изменить затухание в скорости и времени задержки.

Answer 4

Если вы думаете, что вы будете делать больше с анимацией в вашем проект Я настоятельно рекомендую использовать 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