CODEWITHSUNDEEP
javascriptjquerycssdelayfadein
user3324665
user3324665

Reputation: 17

Fade in different lines of text

I am trying to fade in three separate lines of text, each one delayed slightly later than the last. I have discovered how to fade a single line, and how to delay a single line, but whatever I try cannot combine the two. All the JS research is for .fadeIn('slow') for button selectors and whatever tried doesn't work with the code below . Any advice appreciated.

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/

Upvotes: 0

Views: 4007

Answers (4)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

<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 and Be sure to change 

visibility:hidden with display:none;`

Upvotes: 0

valek
valek

Reputation: 1376

Maybe this is what you are looking for: DEMO

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

UPDATE: Note that this will work for any number of lines. You can change fade in speed and delay time.

Upvotes: 0

Michael Homm&#233;
Michael Homm&#233;

Reputation: 1726

If you think you'll be doing more with animation in your project I highly recommend using Animate.css. Then how about not using JavaScript at all for the delay, and keep it real simple with some 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>

For example:

.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

Upvotes: 1

George
George

Reputation: 36784

You can take advantage of CSS transitions for this.

Transitions need a numeric value to function, so you can use the opacity style, rather than 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>

Upvotes: 0

Related Questions