在滚动上淡入元素

Question

我似乎无法在滚动工作中淡入淡出。当我向下滚动它时，我想要一个简单的div淡入。

这是我的代码：

$(function() {
  $(window).scroll(function() {
    $('.fadeInBlock').each(function(i) {
      var bottom_of_object = $(this).position().top + $(this).outerHeight();
      var bottom_of_window = $(window).scrollTop() + $(window).height();

      /* Adjust the "200" to either have a delay or that the content starts fading a bit before you reach it  */
      bottom_of_window = bottom_of_window + 500;

      if (bottom_of_window > bottom_of_object) {
        $(this).animate({
          'opacity': '1'
        }, 500);
      }
    });
  });
});

.fadeInBlock {
  opacity: 0;
}

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