javascript - 淡入/淡出 div 中的文本

Question

我想知道如何让包含文本的 div 在向下滚动页面时从下到上淡入淡出？我将感谢你的帮助。这是我的代码:

var $text = $('.textBlock');
$(window).on('scroll', function(event, element) {
  $text.each(function(event, element) {
    if ($(this).visible()) {
      $(this).children('p').stop().fadeIn();
    } else {
      $(this).siblings('.textBlock p').stop().fadeOut();
    }
  });
});

.textBlock {
  text-align: center;
  width: 100%;
  height: 118px;
  float: left;
  display: block;
}
.textBlock p {
  font-size: 24px;
  padding: 30px 0;
  line-height: 25px;
  letter-spacing: 0.1em;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="blockOne" class="textBlock">
  <p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
<div id="blockTwo" class="textBlock">
  <p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
<div id="blockThree" class="textBlock">
  <p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>

Answer 1

你需要为此使用定时器功能。检查一下:

$(function () {
  $(".textBlock").hide();
  $("#blockOne").show();
  $(window).scroll(function () {
    numTextBlocks = $(".textBlock").length;
    $(".textBlock:visible").fadeOut(400, function () {
      console.log(".textBlock:nth-child(" + ($(window).scrollTop() * 10) % numTextBlocks + ")");
      $(".textBlock:nth-child(" + ($(window).scrollTop() * 10) % numTextBlocks + ")").fadeIn(400);
    });
  });
});

html, body {
  height: 150%;
}
.textBlock {
  position: fixed;
  text-align: center;
  width: 100%;
  height: 118px;
}
.textBlock p {
  font-size: 24px;
  padding: 30px 0;
  line-height: 25px;
  letter-spacing: 0.1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="blockOne" class="textBlock">
  <p>One Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
<div id="blockTwo" class="textBlock">
  <p>Two Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
<div id="blockThree" class="textBlock">
  <p>Three Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>