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]
});
});
})
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.
source to share
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>
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.
source to share
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>
source to share