带有动画的jquery循环，如何等到下一个查询

Question

如何等待下一个循环？我的意思是，当我们与动画循环播放时，如何等到之前的动画结束而不是下一个动画结束？

$("#showMore").on('click', function(){
            childs = $("#subPW").children().length;
            console.log(childs);
            for(i=0;i<childs;i++){
                $("#subPW p:eq("+i+")").show(1200);
            }
        })

我想等到显示p元素，然后再进行下一个操作。现在一切都在第一步中完成

Answer 1

一个选择是jQuery的delay方法，以增加每个元素的延迟：

$("#showMore").on('click', function() {
  const $p = $('#subPW').children();
  const time = 1200;

  for (i = 0; i < $p.length; i++) {
    $p.eq(i).delay(i * time).show(time);
  }
})

p {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="showMore">Show More</button>
<div id="subPW">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

Answer 2

您必须使用.queue()方法。