Question

I am a bit new to programming in jQuery/Javascript and am having some issues showing/hiding a series of headers in a div tag (container). The script code with attempted callback is:

$(document).ready(function(){
    $('<h1>Text1</h1>').hide().prependTo("#container").fadeIn(2000, function(){
        $("#container h1").fadeOut(2000, function(){
            $('<h1>Text2</h1>').hide().prependTo("#container").fadeIn(2000, function(){
                $("#container h1").fadeOut(2000, function(){
                    $('<h1>Text3</h1>').hide().prependTo("#container").fadeIn(2000, function(){
                        $("#container h1").fadeOut(2000, function(){
                            $('<h1>Text4</h1>').hide().prependTo("#container").fadeIn(2000);
                        });
                    });
                });
            });
        });
    });
});

I basically want it to dislay Tesxt1 header with a fadein, then fadeout, then desplay text2 with a fadein and fadeout. Text4 is the last one and should only have a fadein without fadeout. Without the callback functions, everything is executed simultaneously and when they are added (incorrectly) above, later texts are prepended multiple times.

Thank you very much for your time.

Answer 1

Add and hide your elements first and then animate them.

jsFiddle

$(document).ready(function(){
    var text1 = $('<h1>Text1</h1>').hide().prependTo("#container");
    var text2 = $('<h1>Text2</h1>').hide().prependTo("#container");
    var text3 = $('<h1>Text3</h1>').hide().prependTo("#container");
    var text4 = $('<h1>Text4</h1>').hide().prependTo("#container");
    text1.fadeIn(2000, function(){
        text1.fadeOut(2000, function(){
            text2.fadeIn(2000, function(){
                text2.fadeOut(2000, function(){
                    text3.fadeIn(2000, function(){
                        text3.fadeOut(2000, function(){
                            text4.fadeIn(2000);
                        });
                    });
                });
            });
        });
    });
});