How to put a DELAY in an FADEIN

Question

So, I've got this:

$('header').fadeIn(1000, function() {
    // Animation complete
});

$('#intro').fadeIn(3000, function() {
    // Animation complete
});

And now I want the second one to come in later, so with a delay. But where in the code do I put this?

EDIT: Got it, thanks!

What do you mean by delay? After the first one has finished fading in or just a certain amount of seconds? — tpbowden, Apr 11 '13 at 09:56
After the first one has completed fading in, then the second one has to start. — Luc, Apr 11 '13 at 10:16

Thomas Ledan · Answer 1 · 2013-04-11T10:02:41.273

1

If you want to start the second animation after the first one, you should do this

$('header').fadeIn(1000, function() {
    $('#intro').fadeIn(3000, function() {
    // Animation complete
   });
});

edited Apr 11 '13 at 10:02

answered Apr 11 '13 at 09:56

Thomas Ledan

score 1 · Answer 2 · edited May 23 '17 at 12:04

1

jQuery maintains a queue of effects per element. You are animating 2 elements so they will fire simultaneously.

You can nest the functions but that's going to get difficult if you want 10 effects.

Here's a good solution:

edited May 23 '17 at 12:04

Community

answered Apr 11 '13 at 10:07

StarQuake

Hm, they still fire simultaneously. What does the 'my-queue' for? mustn't I define it somewhere? – Luc Apr 11 '13 at 10:13

2 Answers2