【问题标题】:Dynamic load next li after few seconds几秒钟后动态加载 next li
【发布时间】:2016-12-01 11:16:07
【问题描述】:

我想创建一个动态加载ul 列表。

例如,我有这个ul 列表:

<section id="loadLi">
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
    </ul>
</section>

现在我想在 1 秒之间加载 li 元素,第一个 li 一个,1 秒后,li 2,1 秒后,li 3...当用户在该部分时(此代码是在正文的中间,所以我想在用户滚动到 html 的这一部分时动态加载。

有人知道怎么做吗?

P.D:对不起我的英语……我知道这真的很糟糕!

【问题讨论】:

  • 你有什么尝试吗?另外,你从哪里加载它们?
  • 不,我正在尝试这样做,但我什至不知道从哪里开始。 ul 列表是静态的,所以它们不来自任何数据库或其他东西。
  • 静态的?看看我的回答。

标签: jquery html html-lists dynamic-loading


【解决方案1】:

这样的?使用.delay()?

$(function() {
  $("#loadLi li").hide();
  $("#loadLi li").each(function(i) {
    $(this).delay(1000 * i).fadeIn();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="loadLi">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
  </ul>
</section>

【讨论】:

  • 哇,这正是我想要的,但是当用户滚动到该部分时,你知道该怎么做吗?
  • @AlexPerez 您只需要将事件绑定到$(window).scroll() 并检查$(window).scrollTop 值是否为偏移量。
  • 好吧,我去试试。非常感谢!
猜你喜欢
  • 2021-07-22
  • 2017-04-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-06-03
相关资源
最近更新 更多