Question

我知道当它进入视图时如何淡入div ...我当前的功能是这样做的。问题是，当第一个div进入视图时，所有div都会淡入。但是我希望每个div在每个div进入视图时淡入。这是我目前的职能：

$(window).scroll(function() {
    var mywindow = $(window);
    var mypos = mywindow.scrollTop();

    $(".textDiv").each(function() {
      var currentDiv = $(this);
      if (mypos > $(currentDiv).offset()["top"] - mywindow.height()) {
        $(currentDiv).fadeIn(500);
      };
    });

  });

Answer 1

您可能需要THIS

之类的内容

$(document).ready(function() {
  $(".block").before("<p>Block under here</p>");
});

$(window).scroll(function () {
    var mypos = $(window).scrollTop();
    $(".block").each(function () {
        if (mypos > $(this).offset().top - 150) {
            $(this).css('opacity', 1);
        };
    });
});

body {
    padding-bottom: 200px;
}

.block {
    width: 100%;
    border: none;
    display: block;
    background-color: red;
    height: 100px;
    margin-bottom: 200px;
    opacity: 0;
    transition: 0.3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

或像THIS之类的东西继续使用fadeIn

Answer 2

如果您的元素设置为display:none;，则$(currentDiv).offset()["top"]将始终返回0.

您需要使用第一个隐藏的元素作为指针，以指示您需要检查滚动位置的位置。

您可以使用$('.textDiv:hidden:eq(0)');查找实例中的第一个隐藏元素，然后使用.prev()查找上一个元素。

以下完整代码：

http://jsfiddle.net/Ltd9rhrm/3/

var ScrollTimer;
var pos = $(window).scrollTop();
function checkLoc(mywindow, mypos) {
    var $this = $('.textDiv:hidden:eq(0)');
    var $prev = $this.prev();
    if ((mypos + mywindow.outerHeight()) >= ($prev.offset().top + $prev.outerHeight())) {
        $this.fadeIn(500);
    };
}
function fireScroll() {
    pos = $(window).scrollTop();
    checkLoc($(window), pos);    
}
$(window).scroll(function () {
    ScrollTimer && clearTimeout(ScrollTimer);
    ScrollTimer = setTimeout(fireScroll, 100); // Make it only fire when you stop scrolling
});
checkLoc($(window), pos);

.header {
    height:500px;
    background:red;
    border-bottom:5px solid black;
}
.textDiv {
    height:300px;
    width:100%;
    background: rgb(169, 228, 247);
    background: -moz-linear-gradient(top, rgba(169, 228, 247, 1) 0%, rgba(15, 180, 231, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(169, 228, 247, 1)), color-stop(100%, rgba(15, 180, 231, 1)));
    background: -webkit-linear-gradient(top, rgba(169, 228, 247, 1) 0%, rgba(15, 180, 231, 1) 100%);
    background: -o-linear-gradient(top, rgba(169, 228, 247, 1) 0%, rgba(15, 180, 231, 1) 100%);
    background: -ms-linear-gradient(top, rgba(169, 228, 247, 1) 0%, rgba(15, 180, 231, 1) 100%);
    background: linear-gradient(to bottom, rgba(169, 228, 247, 1) 0%, rgba(15, 180, 231, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9e4f7', endColorstr='#0fb4e7', GradientType=0);
    border-bottom:5px solid black;
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header"></div>
<div class="textDiv"></div>
<div class="textDiv"></div>
<div class="textDiv"></div>
<div class="textDiv"></div>
<div class="textDiv"></div>
<div class="textDiv"></div>
<div class="textDiv"></div>

当它进入视野时淡入每个div

2 个答案: