Question

编辑：刚刚意识到我不需要等待滚动延迟。我可以在加载时使节点2中的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

您可以使用.setTimeOut（）

setTimeout(function(){ event() }, 3000);

Answer 2

试试这个：

var ul=[ $('#node2 ul:nth-child(1)'),$('#node2 ul:nth-child(2)')]; 
var flag=false;
setInterval(function () {
        var show = flag?1:0;
        var hide = flag?0:1;
        ul[show].fadeIn(1000);
        ul[hide].fadeOut(1000);
        flag= !flag;
}, 5000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div style="height: 600px" id="node2">

    <ul>
        <li>1Lorem 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>2Lorem 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>

Answer 3

您有两个不同的要求：

检测用户是否滚动过元素。如果您不想重新发明轮子，可以使用像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>

延迟之后，如何在滚动到div之后使div消失？

3 个答案:

Demo