Arranging blocks with jquery animation

Question

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

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.

Answer 1

You could use the delay feature.

$(".blocks").each(function(index) {
    $(this).delay(index * 500).animate({ ... });
});

$(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(index) {
         var number=($(this).data('number'));
        $(this).delay(500 * index).animate({
            top:positions[number][0],
            right:positions[number][1]
        });
    });
})

.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;
    
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

By default, I believe animations are 600ms, but as personal preference, I delay by 500 (to me it looks smoother). Multiplying that by the index means you can "schedule" all the blocks to move when the script runs.

Answer 2

you can use setInterval() function to call your function Here is my code

$(function(){
    // [0][0]==top
    // [0][1]=right
    function Typer(callback)
    {
        var positions=[
            [10,10],
            [10,64],
            [10,118],
            [10,172],    
            [10,226],    
              
            [64,10],
            [64,64],
            [64,118],
            [64,172],    
            [64,226]    
            
        ];
        var i = 0;
        var interval = setInterval(function() {
            var div = $('[data-number="'+i+'"]');
            div.animate({
                top:positions[i][0],
                right:positions[i][1]
            });
            if(i == positions.length) {
                clearInterval(interval);
                callback();
                return;
            }
             i++;
        },
        300);
        return true;
    }
    Typer(function () {});

})

.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;
    
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>