Javascript 'for' loop

I'm trying to make a loop in Javascript/jQuery. This block of code works fine on one run through (if I remove the 'for' loop), but if I put it in a loop it doesn't appear to work once and instead seems to hang.

var z=0;

for(z=0;z<=1000;z++){

$("#welcome").fadeTo(100,0.1,
    function(){$("#welcome").fadeTo(100,1.0,
        function(){$("#welcome").fadeTo(50,0.1,
            function(){$("#welcome").fadeTo(10,1.0,
                function(){$("#welcome").fadeTo(10,0.1,
                    function(){$("#welcome").fadeTo(10,1.0,
                        function(){$(开发者_Go百科"#welcome").fadeTo(1,0.0,
                            function(){$("#welcome_distort").fadeTo(1,1.0,
                                function(){$("#welcome_distort").fadeTo(500,1.0,
                                    function(){$("#welcome_distort").fadeTo(1,0.0,
                                        function(){$("#welcome").fadeTo(1,1.0,
                                            function(){$("#welcome").fadeTo(50,0.1,
                                                function(){$("#welcome").fadeTo(50,1.0,
                                                    function(){$("#welcome").fadeTo(500,1.0
                                                    );}
                                                );}
                                            );}
                                        );}
                                    );}
                                );}
                            );}
                        );}
                    );}
                );}
            );}
        );}
    );}
);

}

Not the clearest explanation, I know, but any help (including advice with javascript loops) would be much appreciated.

FYI, you can chain jQuery functions:

$('#welcome').fadeTo(100, .1).fadeTo(100, 1)...fadeTo(1, 0, function(){
    $('#welcome_distort').fadeTo(1, 1)...fadeTo(1, 0, function(){
        $('#welcome').fade...

The reason it doesn't work in a loop is because you're trying to do 1,000 animations at exactly the same time, thus -killing- the browser. Wrap this in a function and re-call it when done:

function runAnimation(){
    $('#welcome')....function(){
        function(){
            function(){
               runAnimation();
            }
        }
    }
}
runAnimation();

Have you seen the easing plugin? I can only assume you are attempting to do some sort of custom animation with this craziness.

Otherwise, I would create an array of all the variables you need to fade to. And cache the $("#welcome") call, and possibly use deferreds.

It's because the loop will iterate instantly and not wait for your callbacks.

Try this:

var counter = 0;

function do_huge_nested_craziness(){
    if(counter > 100)
    {
        return false;
    }
    /// do huge nested craziness..

    /* in the last callback add this:
    counter++;
    do_huge_nested_craziness(); //recursion
    */
}

Also, try this instead of the monstrosity you have =P.

function make_fader(vals) {
    var next_func = animate_me;
    if (vals.length > 1) {
        var next_vals = [];
        for (var i=1; i<vals.length; i++) next_vals[i-1] = vals[i];
        var next_func = make_fader(next_vals);
    }

    return function() { $("#welcome").fadeTo(vals[0][0], vals[0][1], next_func); };
}
var fader_func = make_fader([[100, 0.1], [100,1.0],[50,0.1],[10,1.0]...]);

var g_count = 0;
function animate_me() {
    g_count += 1;
    if (g_count < 1000) 
        fader_func();            
}