Delaying the pop up for 20 seconds with setTimeout

Question

I have this line

$(document).on('ready', contentLockerShow);

The line will pop up a div called contentLockerWrapper when the page loads, i just wanna delay the pop up for 20 seconds, so i changed the

$(document).on('ready', contentLockerShow);

with

setTimeout(contentLockerShow,20000);

But the contentLockerBackground pop's before the wrapper and the screen is locked before the pop up apears.

this is the function

function contentLockerShow(){
        contentLockerBackground.animate({'opacity':'.6'}, 500);
        contentLockerWrapper.fadeIn(500);    
        if(contentLockerCompleted == false){
            contentLockerCompleted = true;
            console.log(contentLockerCompleted);    
        }

Hope you will find this link useful http://stackoverflow.com/questions/3468607/why-does-settimeout-break-for-large-millisecond-delay-values — Ali Azhar, Aug 26 '13 at 07:19

score 0 · Accepted Answer · answered Aug 04 '13 at 15:31

I misunderstood your question initially. In jQuery, you can tell an animation not to start until another animation finishes. Right now, you have the background and the wrapper both taking half a second to load, at the exact same time. Try this:

function contentLockerShow(){
        contentLockerWrapper.fadeIn(500, function()
            contentLockerBackground.animate({'opacity':'.6'}, 500);
        );    
        if(contentLockerCompleted == false){
            contentLockerCompleted = true;
            console.log(contentLockerCompleted);    
        }

Similarly, if you wanted the window to wait to lock until the background is done loading, you can modify it further like this:

function contentLockerShow(){
        contentLockerWrapper.fadeIn(500, function()
            contentLockerBackground.animate({'opacity':'.6'}, 500, function() 
                 if(contentLockerCompleted == false){
                      contentLockerCompleted = true;
                      console.log(contentLockerCompleted);    
                 }
            );
        );

Delaying the pop up for 20 seconds with setTimeout

1 Answers1