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>

希望它有所帮助！

如何使元素触发以一个小的间隔一个接一个地出现？

1 个答案: