指定した順番にフワッと表示する方法

画面の表示領域に入ったら要素を順番にフワッと出てくるようにしたいのですが
指定した順番に表示するにはどうしたらいいかわかりません。
pic1→3→2の順にするにはどこを指定したら良いのでしょうか？
javascript初心者で分からず、、、
わかる方いらっしゃいましたらよろしくお願いします。

HTML
1<wrap>
2
3<div class="item pic1 menu-fadein">
4 <img src="images/1.jpg" alt="">
5</div>
6<div class="item pic2 menu-fadein">
7 <img src="images/1.jpg" alt="">
8</div>
9<div class="item pic3 menu-fadein">
10 <img src="images/3.jpg" alt="">
11</div>
12
13</wrap>

css
1.menu-fadein {
2	opacity : 0.1;
3	transform : translate(0, 50px);
4	transition : all 500ms;
5	}
6
7.menu-fadein.scrollin {
8	opacity : 1;
9	transform : translate(0, 0);
10	}

javascript
1$(function(){
2　$(window).scroll(function (){
3    $('.menu-fadein').each(function(){
4        var elemPos = $(this).offset().top;
5        var scroll = $(window).scrollTop();
6        var windowHeight = $(window).height();
7        if (scroll > elemPos - windowHeight){
8            $(this).addClass('scrollin');
9        }
10    });
11　});
12});