jquery - How do i animate scattered divs to align on pageload -

i browsing ideas new project , animation caught eye here.

on pre-pageload boxes scattered, after loading scattered boxes come , align in respective positions. seems complicated jquery application willing learn.

any appreciated please, maybe link tutorial or starting point?

here fiddle layout. can have 5 blocks in layout animate above website?

<!--body--> <div id="bodycontainer">      <div id="indexspotlightcontainer">         slider     </div>      <div class="indexblockdivider"></div>      <div id="indexblockcontainer1">         <div class="indexinfoblock">             block1         </div>     </div>      <div class="indexblockdivider"></div>      <div id="indexblockcontainer2">         block2     </div>      <div class="indexblockdivider"></div>      <div id="indexblockcontainer3">         <div class="indexspotcontainer1">             block3         </div>         <div class="indexspotcontainer2">             block4         </div>         <div class="indexspotcontainer3">             block5         </div>     </div>  </div> <!--body--> 

note, may require adjustments @ top css block achieve exact expected effects

try utilizing .animate() , .filter() , .addback()

// select elements animate, // apply beginning animation style, // default syle $("[class^=index], [id^=index]").css({     "width":"0px",     "height":"0px",     "margin":"2px",     "padding":"2px",     "float":"left" }) .filter(function() {   return /^indexinfoblock/.test(this.classname) }) .animate({     width:"964px",     height:"215px" }, 5000) .addback() .filter(function() {   return /^indexblockdiviver|indexspotlightcontainer/.test(this.id) }) .animate({     width:"1024px",     height:"100px" }, 5000)    .addback() .filter(function() {   return /^indexblockdiviver/.test(this.classname) }) .animate({     width:"1024px",     height:"10px" }, 5000) .addback() .filter(function() {   return /^indexblockcontainer/.test(this.id) }) .animate({     width:"1024px",     height:"270px" }, 5000) .addback() .filter(function() {   return /^indexspotcontainer/.test(this.classname) }) .animate({     width:"334px",     height:"270px" }, 5000); 

jsfiddle https://jsfiddle.net/rvtusu89/2/