如何使 <div> 标签内的元素一次消失一个

Question

我需要实现一个垂直滚动条，我决定将其作为嵌套在 parent 和 hide/remove/slideUp 中的 child 元素的列表，一次一个，导致它下面的元素向上移动的效果。

我正在尝试使用 JQuery 的 .each() 迭代嵌套的 .each() 来做到这一点，删除当前的，稍等片刻，然后移动到下一个。

我写了下面的代码来尝试这样做。它等待几秒钟并立即删除所有元素，否定我想要的效果。

我四处搜索，在这里找到的所有其他答案都是关于在对所有元素采取行动之前进行延迟。我已经可以做到这一点，但是我应该怎么做才能让 child 一次消失一个？

$(document).ready(function() {
  $("#scroller").find("div").each(function() {
    console.log(this);
    $(this).delay(10000).slideUp();
    //        $(this).slideUp();
  });
});

<div class="scroller" id="scroller">
  <div id="1">texto 1</div>
  <div id="2">texto 2</div>
  <div id="3">texto 3</div>
</div>

Answer 1

我建议使用 setTimeout 方法为每次失踪计时。

setTimeout(function(){
    $("#1").slideUp();
}, 1000);
// ...

Answer 2

查看此代码：

 $(document).ready(function() {

      $("#scroller").find("div").each(function (index) {
        var el = $(this);

        setTimeout(function (){ 
          el.slideUp();
        },1000 * index);
      });

 });

Answer 3

它们一次全部消失的原因是因为 .delay 函数不会暂停您的代码，它只是将函数安排到运行将来的某个偏移时间。您的代码正在做的是在未来 10000 毫秒为每个 div 一次性安排 .slideUp() 到运行。

你可以做什么而不是用你想要的元素消失之间的时间量来抵消每个延迟。我已将默认延迟设置为 5000 毫秒，因此您可以快速查看其效果。

$(document).ready(function() {
  $("#scroller").find("div").each(function(index) {
    $(this).delay( (1 + index) * 5000 ).slideUp();
  });
});

HTML:

<div class="scroller" id="scroller">
  <div id="1">texto 1</div>
  <div id="2">texto 2</div>
  <div id="3">texto 3</div>
</div>

JSFiddle（点击顶部的运行再次查看）。

如何使 <div> 标签内的元素一次消失一个

How to make elements inside a <div> tag disappear one at a time

javascript

jquery

html

jquery-animate

vertical-scrolling