Question

Whats wrong in here?

    $(document).ready(function(){
        $(window).load(function(){$("#welcome").fadeIn(2000); })
        setTimeout(function(){
            $('div#welcome').fadeOut(2000);
        }, 4000);
        setTimeout(function(){
            $('div#content').fadeIn(2000);
        }, 6000);
        setTimeout(function(){
            $('div#menu').fadeIn(2000);
        }, 8000);
    });

It seems like something is not running as it should, as all functions will be called parallel.

In addition people tell me that my graphic will be loaded with a delay and will ‘stick’.

I appreciate any help!

Answer 1

So, syntax-wise, there isn’t a semi-colon at the end of the window.load event setter. You should add that.

However, I just ran your JS with a mock HTML set, and it worked fine. Not sure what you are experiencing. All three of the setTimeout calls will begin to run at the same time. So… rather than taking 18 seconds to run, they will all only take 8 seconds to run. It looks like that is what you wanted.

Here is the most efficient wait to write your code though:

$(document).ready(function(){
    $(window).load(function(){
        $("#welcome").fadeIn(2000).delay(2000).fadeOut(2000,function(){
            $('div#content').fadeIn(2000,function(){
                $('div#menu').fadeIn(2000);    
            });    
        }); 
    });
});

Here, what will happen is that each of your animations will trigger the next animation, when they are complete.