Question

I am trying to take an object and have it fade out 5 seconds after the document is ready. Then I would like to have another set of functions fire, in my case one that starts adding and easing a set of blocks.

My major problem is the SetTimeout doesn’t have a callback so I can’t run something after it’s done. And that the rest of the code runs when SetTimeout is running.

This is what I have now:

$(document).ready(function() {
                    setTimeout(function() {
                      $('#background-example').fadeOut(2000, function(){
                    });
                      }, 3000); 
                      alert("Hello");   
            });
            </script>

What this does is run a 2000ms fadeOut, 3000ms after the document is ready. However adding the alert, makes the alert run as soon as setTimeout starts because of it’s property of not waiting.

Any suggestions would be great!

Answer 1

That empty function you put in there is a callback that is called after the animation completes. Just move your alert (or any other function call) inside.

setTimeout(function() {
    $("#background-example").fadeOut(2000, function() {
        alert("All done!");
    });
}, 3000);