How can I set a delay in jQuery?

Question

I have a bit of code that acts as a preloader that displays until all JS has loaded. The only problem is I see the preloader appear over the top of the content coming in to the page.

How do I adjust the code below to fade out the '#loading-mask' div, pause with a blank screen for .5 of a second then fade in my page content?

The primary goal is to stop the two from overlapping

Here's my code:

$('#loading-mask').fadeOut();

http://api.jquery.com/delay – Blazemonger Feb 18 '13 at 17:01 — Blazemonger, Feb 18 '13 at 17:01

score 0 · Answer 1 · answered Feb 18 '13 at 17:06

0

$('#loading-mask').fadeOut(500, function() {
    setTimeout(500);
    $('#content').fadeIn()
});

answered Feb 18 '13 at 17:06

Kyri Elia

997
9
18

what was `sleep(500)` for? – Muhammad Talha Akbar Feb 18 '13 at 17:09
I had it as a placeholder and whilst trying to re-remember what sleep is in javascript I accidentally clicked submit too early... whoops. – Kyri Elia Feb 18 '13 at 17:25
`sleep()` is in PHP i think and also in C. Yeah I remember. – Muhammad Talha Akbar Feb 18 '13 at 17:26
Unfortunately this doesn't fade the loading div away then fade in my content after a pause. – egr103 Feb 19 '13 at 09:31

How can I set a delay in jQuery?

1 Answers1