时间戳

首页 > 解决方案 > 如何按顺序显示div？

javascript - 如何按顺序显示div？

问题描述

我正在为自己创建一个网站，并希望在页面加载后使带有文本的 div 按顺序显示（出现之间的一些间隔会很好）。我不需要任何特殊的动画。

我试图在 Stack Overflow 或其他任何地方找到一些东西，但我找不到。它应该是某种信使的“副本”。

这是我得到的：

<div class="messages-area">
  <div class="message bubbledLeft">
    <p>Hey!</p>
  </div>
  <div class="message bubbledLeft last-bubbled-left">
    <p>Did you hear about it?</p>
  </div>
  <div class="message bubbledRight last-bubbled-right">
    <p>Huh? About what?</p>
  </div>
  <div class="message bubbledLeft">
    <p>About this new website!</p>
  </div>
</div>

https://jsfiddle.net/2p860Lxt

标签： javascriptjquery

解决方案

您可以首先使用 CSS 隐藏它们（例如display: none在.message类中使用），然后使用返回的承诺.delay().promise()延迟显示它们，并将这些承诺与reduce：

$(".message").get().reduce(function (acc, div) {
    return acc.then(function () {
        return $(div).show().delay(400).promise();
    });
}, $.when()); // start with a resolved promise
.message { display: none };
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="messages-area">
  <div class="message bubbledLeft">
    <p>Hey!</p>
  </div>
  <div class="message bubbledLeft last-bubbled-left">
    <p>Did you hear about it?</p>
  </div>
  <div class="message bubbledRight last-bubbled-right">
    <p>Huh? About what?</p>
  </div>
  <div class="message bubbledLeft">
    <p>About this new website!</p>
  </div>
</div>

推荐阅读