如何使用 jQuery 逐个元素显示

How can I make appear element by element with jQuery?

本文关键字：元素 显示 何使用 jQuery      更新时间：2023-09-26

对不起，如果我写错了什么:(

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

$(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();
                });
            }
        );
    }
);
我会重构

代码，以便所有段落都已经存在于 HTML 中。然后，一个接一个地展示它们 - 每次，显示第一个仍然隐藏的。我给函数起一个名字，以递归方式调用它作为回调。

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

这是一个工作的小提琴。

您可以编写简单的音序器： 

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>

我通过这个例子取得了成功：

$(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 标记仅在最后一个停止动画之后出现。谢谢你们的帮助!!

相关文章：