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

【问题标题】：How to make elements inside a <div> tag disappear one at a time如何使 <div> 标签内的元素一次消失一个
【发布时间】：2015-03-05 17:50:27
【问题描述】：

我需要实现一个垂直滚动条，我决定将其作为嵌套在父项中的子元素列表，并一次隐藏/删除/向上滑动这些元素，从而导致其下方元素的效果向上移动。

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

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

我四处搜索，我在这里找到的所有其他答案都是关于在处理所有元素之前有延迟。我已经可以做到了，但是我应该怎么做才能让孩子一次一个地消失呢？

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

【问题讨论】：

标签： javascript jquery html jquery-animate vertical-scrolling

【解决方案1】：

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

您可以做些什么，而不是通过您希望元素消失之间的时间来抵消每次延迟。我已将默认延迟设置为 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（点击顶部的运行再次查看）。

【讨论】：

工作得很好，谢谢。像@dark4p 那样使用索引而不是偏移量会更好。我用这个改进改变了你的答案。

【解决方案2】：

查看此代码：

 $(document).ready(function() {

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

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

 });

【讨论】：

这个可行，但@analytalica 的解决方案看起来更干净，甚至还有一个 JSFiddle。谢谢！

【解决方案3】：

我建议使用 setTimeout 方法来计算每次消失的时间。

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

【讨论】：

我相当肯定它们仍然会同时运行。 setTimeout 在调用函数之前不会等待，它会提前安排它。
在创建问题之前，我也尝试过使用 setTimeout（毕竟，这是一个常见的建议），是的，所有元素同时消失了。 :-/