How do you make one set of functions occur after another set in Javascript?

Question

I currently have a block of Javascript that serves as the intro to my site:

$('.welcome').fadeIn(500);
    }, 3600)
    setTimeout(function() {
        $('.welcome').fadeOut(500);
    }, 5100)
    setTimeout(function() {
        $('.quotable').fadeIn(800);
    }, 5600)

    setTimeout(function() {
        $('.quotable').animate({
            "margin-top" : 0,
            "font-size" : '20px'
        }, 2000)
    }, 6000)
    setTimeout(function() {
        $('.quotable').fadeOut(1500);
    }, 7000)

And am trying to make this next block of code, which would be the homepage, run after it finishes:

$('.nav').fadeIn(1500)
$('#background').fadeIn(1500)

    setTimeout(function() {
        $('#background').fadeOut(1500);
    }, 8000)
    setTimeout(function() {
        $('#background2').fadeIn(1500);
    }, 8000)

I tried doing a callback but it didn't work.

Here's the HTML:

<div class="welcome">welcome to</div>
<div class="quotable">the quotable</div>


<div class = "images">
<div id="background">
  <img src="Image1.jpg" alt="">
</div>
<div id="background2">
  <img src="Image2.jpg" alt="">
</div>
</div>


<div class = "nav">
    <ul>
        <li class="left"><a href="#" class="quotes">Quotes</a>

            <ul class="menu">
                <li id="philosophy"><a href="#">Philosophy</a>
                </li>
                <li id="love"><a href="#">Love</a>
                </li>
            </ul>
        </li>
        <li class="right"><a href="#">About</a></li>
    </ul>
</div>

And the CSS:

.welcome {
  color: black;
  font-family: Copperplate;
  position: absolute;
  font-size: 60px;
  z-index: 3;
}

.quotable {
  color: black;
  font-family; Copperplate;
  position: absolute;
  font-size: 60px;
  z-index: 4;
}

#background {
 position: fixed;
 top: -50%;
 left: -50%;
 width: 200%;
 height: 200%; 
}

#background img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}

#background2 img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}

.nav {
    background: #333;
    font-size: 15px;
    color: #000000;
    margin: 0;
    width: 100%;
    position:fixed;
    bottom: 0;
    list-style-type: none;
    opacity: 0.75;
    padding: 0;
    z-index: 150;
}

.nav ul, li, a {
    margin: 0;
    padding: 0;
    z-index: 150;
}

.nav li {
    list-style: none;
    z-index: 150;
}


 ul > li {
    float: left;
    z-index: 150;
}
.nav ul > li a {
    color: #fff;
    font-weight: bold;
    line-height: 40px;
    height:40px;
    display:block;
    padding:0px 10px;
    z-index: 150;
}
.nav a:hover {
    background-color: #111;
    color: white;
    text-decoration: none;
    z-index: 150;
}

Please help!

`setTimeout(..., { do normal stuff; call_next_sequence() }`, basically. have the final step of your first bunch of fades call a function trigger the next batch. — Marc B, Feb 09 '16 at 19:23
the 1990 splash pages are back! JQuery animations have a complete callback. — epascarello, Feb 09 '16 at 19:28

score 0 · Answer 1 · answered Feb 09 '16 at 19:26

You can use relative setTimeouts, like so:

$(element).fadeOut(1500, function() {
   setTimeout(function() { 
       $(nextElement).fadeOut(500, function() ...
   }, 500); //do next animation in .5 seconds
}

Or even better, you can look into CSS3 animations, or even promises, like this question: How do I animate in jQuery without stacking callbacks?

score 0 · Answer 2 · answered Feb 09 '16 at 19:26

You can pass another function to the jQuery effects which executes after the animation which I think is cleaner than a lot of nested timeouts.

$("h1").fadeIn('slow', function() {
    $("h2").fadeIn("slow", function() {
       $("h3").fadeIn("slow");
    });
});

https://jsfiddle.net/34nqqjqv/

You can also use this approach for jQuery animate and pass in a callback.

score 0 · Answer 3 · answered Feb 09 '16 at 19:46

As with common practice I would recommend using callbacks or promises so the function will run right when it is able and you have no down time waiting for the next trigger. I you use timeouts which is great for animation and UX however if you don't place the timeouts in a callback you can have bleeding from one function to the other if the timing is off for any reason.

This is the callback method.

step1(function (value1) {
    step2(value1, function(value2) {
        step3(value2, function(value3) {
            step4(value3, function(value4) {
                // Do something with value4
            });
        });
    });
 });

This is the promises method. (For promises to work you will need a library like q)

Q.fcall(promisedStep1)
.then(promisedStep2)
.then(promisedStep3)
.then(promisedStep4)
.then(function (value4) {
    // Do something with value4
})
.catch(function (error) {
    // Handle any error from all above steps
})
.done();

How do you make one set of functions occur after another set in Javascript?

3 Answers3