Alex Perez Alex Perez - 6 days ago 4
HTML Question

Dynamic load next li after few seconds

I want to create a dynamic load a

ul
list.

For example, I have this
ul
list:

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


Now i want to load the
li
elements between 1 second, first
li
one, after 1 second, li two, after 1 second, li three... when the user is on the section (this code is at the middle of the body, so i want to load dinamically when the user scrolled to this part of the html).

Anyone knows how to do it?

P.D: I'm sorry about my english...i know it's really bad!

Answer

Something like this? Using .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>