javascript - 如何让元素触发一个接一个地出现，间隔很小？

Question

我有一系列的四个元素。其中第一个 (#pro1) 将在滚动到页面上的特定点时出现(目前有效)，接下来的三个将触发一个接一个地出现，每个之间的间隔很小。

任何帮助将不胜感激!非常感谢您!

这是第一个元素的代码，只需要让其他元素出现在这个元素出现之后(#pro2、#pro3、#pro4 等)

<script>
  $(window).one("scroll", function() {
      $('#pro1').each(function () {
           var topOfWindow = $(window).scrollTop(),
           bottomOfWindow = topOfWindow + $(window).height();

           var imagePos = $(this).offset().top;

           if(imagePos < bottomOfWindow-200 && imagePos >= topOfWindow-500){
                $(this).addClass('bigEntrance2'); 
           }else{
                $(this).removeClass('bigEntrance2');
           }
      });
  });
</script>

Answer 1

关键是使用setInterval重复调用将创建(或显示它们是否已创建)下一个元素的函数。

重要的是不要忘记 clear作业完成的时间间隔。

如果没有 html 和 css 很难准确地实现您想要实现的目标，但是从下一个示例中您应该不会有问题来更新您的。

---

var interval = null;
var elementId = 1;
var numElements = 4;
var delay = 1000; //ms


$(document).ready(function()
{
    //your first "pro1" element show up
    var element = "<div>Im the pro" + elementId + " element!</div>";
     $('body').append(element);   
    //in that moment we set the interval
    interval = setInterval(show_next_element, delay);
});


function show_next_element()
{
    //increment the counter elementId
    elementId++;
    //create the next element
    var element = "<div>Im the pro" + elementId + " element!</div>";
    //add it to the DOM
     $('body').append(element);   
    //when our last element is created we clear the interval
    if(elementId >= numElements)
        clearInterval(interval);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

希望对您有所帮助!