スクロールフェードインを順番に表示したい

スクロールでフェードインを、要素ごとに順番にさせたいです。
フェードインはできたのですが、どうしてもimgとテキストの表示をずらすことができません。
テキストのほうを後に表示させたいので
transition: all 5000ms;や
transition-delay: 0.1s;を指定したりしたのですが同時に表示されてしまいます。
javascriptは初心者なので、お手柔らかにご教示お願い致します。

html
1<div class="container">
2   <section id="hero">
3       <div class="fadein">
4           <img src="../image/top/pc/logo.png" alt="">
5       </div>
6       <div class="caption">
7           <p class="fadein">
8                テキストテキストテキスト
9           </p>
10       </div>
11    </section>
12</div>
13
14

css
1.fadein {
2    opacity : 0;
3	transition : all 4000ms;
4}
5
6.fadein.scrollin {
7	opacity : 1;
8	transform : translate(0, 0);
9}
10
11.caption {
12    text-align: right;
13    
14    .fadein.scrollin {
15        transition-delay: 0.1s;
16    }
17}
18

js
1function scroll_fadein(){
2    jQuery('.fadein').each(function(){
3        var elemPos = jQuery(this).offset().top;
4        var scroll = jQuery(window).scrollTop();
5        var windowHeight = jQuery(window).height();
6        if (scroll > elemPos - windowHeight + 300){
7            jQuery(this).addClass('scrollin');
8        }
9    });
10}
11
12jQuery(function(){
13    jQuery(window).scroll(function (){
14        scroll_fadein();
15    });
16    scroll_fadein();
17});