Question

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

我尝试使用JQuery的.each（）来迭代嵌套，删除当前的，稍等一会儿，然后移动到下一个。

我在下面编写了代码，试图这样做。它会等待几秒钟并立即删除所有元素，否定了我打算产生的效果。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

查看此代码：

 $(document).ready(function() {

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

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

 });

Answer 2

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

你可以做什么，而不是将每个延迟偏移你想要的元素之间消失的时间。我已将默认延迟设置为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（点击顶部的Run再次查看）。

Answer 3

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

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

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

3 个答案: