javascript - 延迟后，如何让div在滚动到后消失？

Question

编辑:刚刚意识到我不需要等待滚动延迟。我可以在加载时使node2中的ul每五秒连续切换一次(淡入/淡出)。这简化了我认为的问题。

抱歉，我无法表述这个问题。

相关代码如下:

<div style="height: 600px" id="node1">


</div>

<div style="height: 600px" id="node2">

    <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elite.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elite.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elite.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elite.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elite.</li>
    </ul>

    <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elite.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elite.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elite.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elite.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elite.</li>
    </ul>


</div>

基本上一旦滚动到node2，我想显示第一个ul并隐藏第二个ul。延迟大约 5 秒后，我想让第一个 ul 淡出，第二个 ul 淡入。然后重复该过程。

我真的不知道如何将 ul 需要滚动到的事实和滚动到后的延迟结合起来，所以我没有任何尝试解决方案的代码。

Answer 1

您有两个单独的要求:

• 检测用户是否滚动过某个元素。如果你不想重新发明轮子，你可以使用像Waypoints这样的插件，它已经做到了这一点。

  var firstTime = true; // we'll make sure the animation starts only once
  
  $('#node2').waypoint({
    // When #node2 arrives at 75% of the screen
    offset: '75%',
    handler: function(direction) {
      // If it's the first time and we're scrolling down
      if(firstTime && direction == 'down') { 
        firstTime = false;
        // Apply fading effect
        $('ul', this.element).fadingEffect();
      }
    }
  });
  

• 元素淡入淡出。由于您在问题的标签中提到了 jQuery，我们将使用它并创建一个函数来依次显示您的 ul 元素。

  $.fn.fadingEffect = function() {
    var elements = $(this),
        total    = elements.length,
        index    = 0;
  
    elements.hide();
  
    (function next() {
      elements.eq(index)
              .fadeIn(500)
              .delay(5000)
              .fadeOut(200, function() {
                  index++;
                  if (index >= total) { index = 0; }
                  next();
              });
    })();
  };
  

Demo

为此，请确保在页面中的脚本之前包含 jQuery 和 Waypoints:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>