Question

我正在为自己创建一个网站，并希望在页面加载后使带有文本的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

Answer 1

您不需要jQuery。使用纯JavaScript的方法如下：

HTML：

// here goes my personal variables
@import "./themes/[theme_name]/variables";
@import "~bootstrap/scss/bootstrap";
@import "./themes/[theme_name]/bootswatch";

JavaScript：

<div id="message-area"></div>

这会将5个消息元素添加到消息区域（相隔500毫秒）。

Answer 2

您可以先用CSS隐藏它们（例如在display: none类中用.message隐藏它们，然后使用.delay().promise()返回的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>

如何按顺序显示div？

2 个答案: