fadein＋時差・jQuery・使い方

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script>

<section>
	<div class="container00">
	<ul class="fadein-fi">
		<li class="animate">
			<img src="images/001_archives_aalt.jpg">
			<p>AALTO<i>アアルト</i></p>
		
		</li>
		<li class="animate">
			<img src="images/001_archives_aalt.jpg">
			<p>AALTO<i>アアルト</i></p>
		
		</li>
				<li class="animate">
			<img src="images/001_archives_aalt.jpg">
			<p>AALTO<i>アアルト</i></p>
		
		</li>
				<li class="animate">
			<img src="images/001_archives_aalt.jpg">
			<p>AALTO<i>アアルト</i></p>
		
		</li>
				<li class="animate">
			<img src="images/001_archives_aalt.jpg">
			<p>AALTO<i>アアルト</i></p>
		
		</li>
				<li class="animate">
			<img src="images/001_archives_aalt.jpg">
			<p>AALTO<i>アアルト</i></p>
		
		</li>
				

	</ul>
	</div>	
</section>	

.fadein-fi {
	display: flex;
	margin-right: -16px;
	flex-wrap: wrap;
	justify-content: space-between;
}

.fadein-fi li {
	width: calc(100%/6 - 16px);
	margin-right: 16px;
}

.animate {
  opacity: 0;

  transform: translateY(10px);
  transition: all 1.0s;
}

.animate.show {
  opacity: 1;
  transform: translateY(0);
}
.animate.show:nth-of-type(1) {
  transition-delay: 0s;
}
.animate.show:nth-of-type(2) {
  transition-delay: 0.1s;
}
.animate.show:nth-of-type(3) {
  transition-delay: 0.2s;
}
.animate.show:nth-of-type(4) {
  transition-delay: 0.3s;
}
.animate.show:nth-of-type(5) {
  transition-delay: 0.4s;
}
.animate.show:nth-of-type(6) {
  transition-delay: 0.5s;
}

<script>
$(function() {
  $(window).on('scroll resize', function() {
    var setHeight = 100;
    var wHeight = $(window).height();
    var scrollTop = $(window).scrollTop();
    $('.animate').each(function() {
      var targetPosition = $(this).offset().top;
      if(scrollTop > targetPosition - wHeight + setHeight) {
        $(this).addClass('show');
      }
    })
  });
});
</script>