How can I make appear element by element with jQuery?

Question

Sorry if I wrote something wrong :(

I get success with this, but if I'd have a lot of paragraphs to show one by one?

$(document).ready(
    function(){
        $("#click").click(
            function() {
                $("body").append("<p class='add'>joaoao</p>");
                $("p.add").fadeIn("slow", function(){
                    $("body").append("<p class='add'>joaoao</p>");
                    $("p.add").fadeIn();
                });

            }
        );
    }
);

Answer 1

I would refactor the code a bit so that all the paragraphs already exist in the HTML. Then, just show them one by one -- each time, show the first one that's still hidden. I give the function a name to call it recursively as the callback.

        $("#click").click(
            function fadeIn() {
                $("p:hidden").first().fadeIn("slow", fadeIn);

            }
        );

Here's a working fiddle.

Answer 2

You can write simple sequencer:

 function startSequence(selector) { var idx = 0; var seq = $(selector); var id = window.setInterval( function() { if( idx >= seq.length ) { window.clearInterval(id); return; } $(seq[idx]).addClass("shown"); ++idx; }, 1000 ); } startSequence("p"); 

 p { color:transparent; background-color:transparent; } p.shown { color:#000; background-color:gold; transition: all linear 1s; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>1111111111111111</p> <p>2222222222222222</p> <p>33333333333333</p> <p>344444444444444</p> <p>5555555555</p> 

Answer 3

I got success with this example:

$(document).ready(
    function(){
        $("#click").click(
            function() {

                var count = prompt("How many joao's do you want to appear?");
                var int = setInterval(
                    function(){
                        if(count==1){
                            clearInterval(int);
                        }
                        $("body").append("<p class='add'>joaoao</p>");
                        $(".add").fadeIn();
                        count--;
                    }
                    ,800);
            }
        );
    }
);

following p tag only appears after the last stop animation. thanks for the help guys!!!