fade in each div when it comes into view

Question

I know how to fade in a div when it comes into view... My current function is doing that. The issue is that when the first div comes into view, all the divs fade in. However I want each div to fade in when each one comes into view. This is my current function:

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

You might want something like 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>

Or something like THIS to keep using fadeIn

Answer 2

If your elements are set to display:none;, $(currentDiv).offset()["top"] will always return 0.

You need to use the element above the first hidden one as a pointer for where you need to check for scroll location.

You can use $('.textDiv:hidden:eq(0)'); to find the first hidden element in your instance and then use .prev() to find the previous element.

Full code below:

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>