I have a `div.content` and there are 30 divs inside that (`div.blocks`)

I want to make an animation to `div.blocks` that come and go to their own position.

for example:

**CSS**

```
.content{
    position:absolute;
    background:gray;
    width:100%;
    height:100%;
}

.blocks{
    display:inline-block;
    position:absolute;
    background:wheat;
    color:gray;
    font-size:large;
    width:50px;
    height:50px;
    margin-top:4px; 
}

```

---

**HTML**

```
<div class="content">
    <div class="blocks" data-number="0">1</div>
    <div class="blocks" data-number="1">2</div>
    <div class="blocks" data-number="2">3</div>
    <div class="blocks" data-number="3">4</div>
    <div class="blocks" data-number="4">5</div>
    <div class="blocks" data-number="5">6</div>
    <div class="blocks" data-number="6">7</div>
    <div class="blocks" data-number="7">8</div>
    <div class="blocks" data-number="8">9</div>
    <div class="blocks" data-number="9">10</div>
</div>

```

---

**Jquery**

```
$(function(){
    // [0][0]==top
    // [0][1]=right
    var positions=[
    [10,10],
    [10,64],
    [10,118],
    [10,172],    
    [10,226],    

    [64,10],
    [64,64],
    [64,118],
    [64,172],    
    [64,226]    

    ];

    $( ".blocks" ).each(function() {
         var number=($(this).data('number'));
        $(this).animate({
            top:positions[number][0],
            right:positions[number][1]
        });
    });
})

```

[DEMO](http://jsfiddle.net/xnf7be8o/1/)

It is working well, But I want animation runs one by one (*when one animation completed **callback***), I mean when first `.blocks` arrived to `right:10` and `top:10` then run other one.