How can I fade in multiple divs sequentially?

Question

I am trying to create a serial fadeIn using jQuery. Essentially, when the page loads, I want the three words FadeIn, one by one. For example: Page loading -> Word1 fades -> Word2 fades -> Word3 fades. The next word will disappear only after the previous word has ended. Each individual word is in its own div at the moment. This is what I got so far, but for some reason it does not work:

<script type="text/javascript"> $(document).ready(function() { $('#word1').delay(500).fadeIn(1000); $('#word2').delay(1500).fadeIn(1000); $('#word3').delay(2500).fadeIn(1000); }); </script> <div id="word1">Word 1</div> <div id="word2">Word 2</div> <div id="word3">Word 3</div> 

Any help would be greatly appreciated.

Answer 1

jsFiddle here.

One way to do this is to use each() loop and fade in:

 $(document).ready(function() { $('#word1, #word2, #word3').each(function(fadeInDiv) { $(this).delay(fadeInDiv * 500).fadeIn(1000); }); }); 

Note. I fadeInDiv parameter fadeInDiv , which will increase for each of the three elements (returns 0 , 1 , 2 ) and multiply this by the delay, so you get respectively increase accordingly ( 0 , 500 , 1000 ), etc.

Of course, this is very easy, as you think, here is another jsFiddle , using the word class instead.

Answer 2

You can edit your markup and add classes to your word divs:

 <div id="word1" class="words">Word 1</div> <div id="word2" class="words">Word 2</div> <div id="word3" class="words">Word 3</div> 

And then call this JavaScript:

 $('.words').each(function(i) { $(this).delay(500*(i+1)).fadeIn(1000); //Uses the each methods index+1 to create a multiplier on the delay }); 

If you have not added a new class , then work:

 $('#word1, #word2, #word3').each(function(i) { $(this).delay(500*(i+1)).fadeIn(1000); }); 

jsfiddle

Answer 3

The jQuerys fadeIn() function takes the second argument to complete , which is the function that will be called when the attenuation completes.

So maybe try something like this:

 $(document).ready(function () { var $word1 = $('#word1'), $word2 = $('#word2'), $word3 = $('#word3'); $word1.delay(500).fadeIn(1000,function () { $word2.fadeIn(1000, function () { $word3.fadeIn(1000); }); }); }); 

Answer 4

Gabriel

You do not need to rely on delays.

The “right” way to do sequential animations is to use the promise available in the jQuery standard fx animation queue, letting you run anything you want after the animation finishes - in this case, the fade in the next word.

The code can be written in several ways, here is one:

 function f(baseID, n, t) { var jq = $("#" + baseID + n); if(jq.length) { jq.fadeIn(t).promise().done(function() { f(baseID, n+1, t); }); } }; f('word', 1, 1000); 

Demo

Written like this, the f() function can be reused. For example, you may have two separate series of attenuation:

 f('word', 1, 1000); f('other', 1, 1000); 

Demo

Answer 5

I gave an example so that you can pay off only the necessary sub-elements of this element using the .children().each() jquery function. You can use the code quite easily.

 $(document).ready(function() { $("#maincontentinner").children().each(function(i) { $(this).delay((i++) * 200).fadeIn().delay(200); }); }); 

  #maincontentinner > * { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <H1>Este texto no será cambiado</H1> <div id="maincontentinner"> <p>1</p> <p>2</p> <ul> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> <p>este texto no cambiará</p>