如何使用jQuery逐個元素顯示？

Question

對不起，如果我寫錯了:(

我在此方面獲得了成功，但是如果我有很多段落可以一一展示？

$(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

我將對代碼進行一些重構，以便HTML中已經存在所有段落。 然后，一個接一個地顯示它們-每次顯示仍隱藏的第一個。 我給函數起一個名稱，以作為回調遞歸調用它。

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

            }
        );

這是一個工作的小提琴。

Answer 2

您可以編寫簡單的音序器：

 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

我通過以下示例獲得了成功：

$(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);
            }
        );
    }
);

以下p標簽僅在最后一站動畫之后出現。 謝謝你們的幫助！！！