Organizing blocks with jquery animation

I have div.content

and inside it there are 30 divs ( div.blocks

)

I want to make animations div.blocks

that come and go in their own position.

eg:

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 works well, but I want the animation to start one by one (when one animation has completed the callback ), I mean when the first one .blocks

arrived at right:10

and top:10

then start the other one.

+3


source to share


2 answers


You can use the function delay

.

$(".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>
      

Run codeHide result


By default, I think the animation is 600ms, but as a personal preference, I delay it by 500 (it looks smoother to me). Multiplying this index means that you can "schedule" all the blocks that will move when the script is executed.

+5


source


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>
      

Run codeHide result


+2


source







All Articles