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

您需要使用计时器功能。看看这个：

＆＃13;

$(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);
    });
  });
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

这就是我使用的：

$(document).on("mousewheel", function () {
    $(".textBlock:not(:visible)").first().fadeIn("slow")
});

Here is the JSFiddle demo

Answer 3

如果此代码适合您，请告诉我。

Fiddle

$(window).on("load",function() {
function fade() {
    $('.fade').each(function() {
        /* Check the location of each desired element */
        var objectBottom = $(this).offset().top + $(this).outerHeight();
        var windowBottom = $(window).scrollTop() + $(window).innerHeight();

        /* If the object is completely visible in the window, fade it in */
        if (objectBottom < windowBottom) { //object comes into view (scrolling down)
            if ($(this).css('opacity')==0) {$(this).fadeTo(500,1);}
        } else { //object goes out of view (scrolling up)
            if ($(this).css('opacity')==1) {$(this).fadeTo(500,0);}
        }
    });
}
fade(); //Fade in completely visible elements during page-load
$(window).scroll(function() {fade();}); //Fade in elements during scroll

}）;

Fadein / Fadeout div中的文字

3 个答案: