2

Hey there guys, Im good with HTML and CSS but have only jsut started to scratch the surface of jQuery. I'm looking to make 3 divs fade in on page load one after another. So far I have this

<script type="text/javascript">
    $('#1').hide().fadeIn(1500);
    $('#2').hide().fadeIn(1500);
    $('#3').hide().fadeIn(1500);
</script>

I heard that to use css to set the display to none is a nightmare for anyone with a non JavaScript browser so I used the hide function to initially hide the divs.

But this only fades them in all at once. Any ideas?

Alex Sadler
  • 435
  • 2
  • 8
  • 22
  • If no Javascript in browser then no fadeIn or other such effects. So instead of worrying about javascript disabled browser while applying fadeIn effect, you can show them static content in the noscript section. – Atharva Nov 25 '12 at 09:21
  • Answering your main query of sequential fading I have tried to answer it below. – Atharva Nov 25 '12 at 09:21

5 Answers5

16

You can .delay() each so the one before fades in at the right time, for example:

$("#1, #2, #3").hide().each(function(i) {
  $(this).delay(i*1500).fadeIn(1500);
});

This fades them in...in the same order they occur in the page which is usually what you're after, the first is delayed 0 so it's instant, the second is delayed 1500ms (so when the first finishes, etc). In the .each() callback i is the index, starting with 0 so you can use that to quickly calculate the right delay here.

Another advantage here is this approach is much easier to maintain, give them a class for example then you can just do:

$(".fadeMe").hide().each(function(i) {
  $(this).delay(i*1500).fadeIn(1500);
});

Then you require zero maintenance on the JavaScript side to add additional <div> elements to fade.

Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
2

The fade in command contains a call back function, see documentation. This means you could chain the events.

<script type="text/javascript">
    $('#1, #2, #3').hide();

   $('#1').fadeIn(1500, function(){ $('#2').fadeIn(1500, function(){$('#2').fadeIn(1500)})});
</script>
Paul Hadfield
  • 6,088
  • 2
  • 35
  • 56
1
<script type="text/javascript">
    $('#1').hide().fadeIn(1500, function(){
        $('#2').hide().fadeIn(1500, function(){
             $('#3').hide().fadeIn(1500);
        });
    });
</script>
José Manuel Lucas
  • 199
  • 1
  • 9
  • This does not work. I had to skip the 2 functions and use 3 statements. Worked perfectly. – Juice Jul 18 '17 at 02:06
0

Here is a cleaner and generic way to achieve this effect: check it out on http://jsfiddle.net/BztLx/20/

Logic trick relies on the callback functionality of the fadeIn and using .eq() as an iterator over the selected elements.

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function sequentialFadeIn(selectorText, speed, display, callBack) {

    display = typeof display !== 'undefined' ? display : "block";

    var els = $(selectorText), i = 0;

    (function helper() {
        els.eq(i++).fadeIn(speed, helper).css("display", display);
        if (callback && i === els.length) callback();
    })();
}

sequentialFadeIn(".toBeFaddedIn", "slow", "inline-block", function() {
    console.log("I am just an optional callback");
});​
});
</script>

</head>
<body><style media="screen" type="text/css">
.hello {
    background-color: blue;
    height:50px;
    width: 50px;
    display: none;

}
</style>

<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>

</body></html>
Atharva
  • 6,711
  • 5
  • 31
  • 39
0

Using the Delay function as following:

<script type="text/javascript">
    $('#1').hide().fadeIn(1500);
    $('#2').hide().delay(1500).fadeIn(1500);
    $('#3').hide().delay(3000).fadeIn(1500);
</script>
Timo Willemsen
  • 8,717
  • 9
  • 51
  • 82