fadeIn some div one by one using jquery

Question

I have 8 div . I want that when the page gets ready , each div fade into the page and after that the next one .... I tried this but all the div fade into the page together. What should I do for that? Thanks

 <div class="parts" id="div1">
        <img src="images/home_title.png" alt="" />
 </div>
 <div class="parts" id="div2">
       <img src="images/call_title.png" alt="" width="150px" height="40px" />
 </div>
 <div class="parts" id="div3">
       <img src="images/about_title.png" alt="" width="150px" height="40px" />
 </div>
 <div class="parts" id="div4">
       <img src="images/about_title.png" alt="" width="150px" height="40px" />
 </div>
 <div class="parts" id="div5">
       <img src="images/about_title.png" alt="" width="150px" height="40px" />
 </div>
 <div class="parts" id="div6">
       <img src="images/about_title.png" alt="" width="150px" height="40px" />
 </div>
 <div class="parts"  id="div7">
    <img src="images/about_title.png" alt="" width="150px" height="40px" />
 </div>
 <div class="parts" id="div8">
    <img src="images/about_title.png" alt="" width="150px" height="40px" />
 </div>

and jquery:

  $(document) .ready(function(){
     $(".parts").each(function(){
         $(this).fadeIn();
     });
  });

Answer 1

Try this

$(".parts").each(function(index) {
    $(this).delay(400*index).fadeIn(300);
});

DEMO

OR

$('.parts').each(function(i) {
    $(this).hide().delay(i * 3500).fadeIn(1500);
});

DEMO