Question

I’m a little new to jQuery and javascript.
On my html, I have a div id="test", under which I have div’s like #testone,#testtwo,...

Now if I click on the button #clickme, the fade effect comes, but goes away very soon, even before it reaches #testthree.

I want it to be there until the user clicks somewhere on the document.
Also is there a neater way to do this than to repeat elements?

$( '#clickme' ).click( function() {
    $("#test").fadeIn(function(){
      $("#testone").show().fadeIn("3000", function(){
        $("#testtwo").fadeIn("4500", function(){
          $("#testthree").fadeIn("6000", function(){
        $("#testfour").fadeIn("7500", function(){
          $("#testfive").fadeIn("9000", function(){
            return false;
              });
            });
          });
        });
      });   
    });
});

$(document).click( function() {
    $( '#test' ).hide(1000);
    return false; 
});

Answer 1

Try this, assuming all your #test, #testone, #testtwo divs are siblings inside a parent container:

function fade_in_recursive(e,duration,callback)
{
    $(e).fadeIn(duration,function()
    {
        if($(e).next().length == 0)
        {
            if(typeof(callback) == 'function')
            {
                callback();
            }
            return;
        }
        else
        {
            // Apply recursion for every sibling.
            fade_in_recursive($(e).next(),duration,callback);
        }
    });

} // End function

$('#click_me').click(function(){
    fade_in_recursive($('#test'), 1000, function(){alert('all done');});
});

Example: http://jsfiddle.net/AlienWebguy/9npvz/2/