Jquery 如何设置分散div的动画以在pageload上对齐

我正在浏览一个新项目的一些想法，这个动画吸引了我的眼球

在页面加载前，框是分散的，但加载后，分散的框会出现并在各自的位置对齐。这似乎是一个复杂的jQuery应用程序，但我愿意学习

任何帮助都将不胜感激，也许是一个教程或起点的链接

这对我的布局是一种干扰。我可以在我的布局中的所有5块动画像上面的网站

<!--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-->

滑块
区块1
区块2
区块3
区块4
区块5

注意，可能需要在顶部

css

块进行调整，以达到准确的预期效果

试着利用

JSFIDLE

// select all elements to 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);