How can I use jQuery to animate graphic loading?

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

I think you are looking for something like this.

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

            }, 4000);
        });
    });

Answer 2

If you want to do something after something is finished you need to add another function after you set your parameter (2000 in this case).

I believe that you want to do something like this http://jsfiddle.net/Cp4Dx/

Answer 3

OP不要忘记Jquery的delay（）函数，它可以帮助您避免setTimeout（）。

$(window).load(function(){$("#welcome").fadeIn(2000).delay(4000).fadeOut(2000)});

Answer 4

You can use the jQuery queue for it:

$(document).ready(function() {
    $('#welcome').fadeIn(2000).delay(2000).fadeOut(2000);
    $('#content').delay(4000).fadeIn(2000);
    $('#menu').delay(6000).fadeIn(2000);
});

Demo: http://jsfiddle.net/ThiefMaster/9nPAR/

Answer 5

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.