I want to animate a bar chart, but I would like for the bars to animate from left to right. As of right now, they all go at the same time.
How can I achieve that?
$(function() {
$("#bars li .bar").each(function() {
var percentage = $(this).data('percentage');
$(this).animate({
'height': percentage + '%'
}, 1000);
});
});
@import "lesshat";
@import url(https://fonts.googleapis.com/css?family=Roboto:400+700);
body {
background: #30303A;
font-family: Roboto;
}
#chart {
width: 650px;
height: 300px;
margin: 30px auto 0;
display: block;
}
#chart #numbers {
width: 50px;
height: 100%;
margin: 0;
padding: 0;
display: inline-block;
float: left;
}
#chart #numbers li {
text-align: right;
padding-right: 1em;
list-style: none;
height: 29px;
border-bottom: 1px solid #444;
position: relative;
bottom: 30px;
}
#chart #numbers li:last-child {
height: 30px;
}
#chart #numbers li span {
color: #eee;
position: absolute;
bottom: 0;
right: 10px;
}
#chart #bars {
display: inline-block;
background: rgba(0, 0, 0, 0.2);
width: 600px;
height: 300px;
padding: 0;
margin: 0;
box-shadow: 0 0 0 1px #444;
}
#chart #bars li {
display: table-cell;
width: 100px;
height: 300px;
margin: 0;
text-align: center;
position: relative;
}
#chart #bars li .bar {
display: block;
width: 70px;
margin-left: 15px;
background: #49E;
position: absolute;
bottom: 0;
}
#chart #bars li .bar:hover {
background: #5AE;
cursor: pointer;
}
#chart #bars li .bar:hover:before {
color: white;
content: attr(data-percentage) '%';
position: relative;
bottom: 20px;
}
#chart #bars li span {
color: #eee;
width: 100%;
position: absolute;
bottom: -2em;
left: 0;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chart">
<ul id="bars">
<li>
<div data-percentage="56" class="bar"></div><span>Option 1</span></li>
<li>
<div data-percentage="33" class="bar"></div><span>Option 2</span></li>
<li>
<div data-percentage="54" class="bar"></div><span>Option 3</span></li>
<li>
<div data-percentage="94" class="bar"></div><span>Option 4</span></li>
<li>
<div data-percentage="23" class="bar"></div><span>Option 5</span>
</li>
</ul>
</div>
You can adjust the time based on the index so the rightermost bars take longer to animate.
$("#bars li .bar").each( function( index ) {
var percentage = $(this).data('percentage');
console.log(percentage)
$(this).animate({
'height' : percentage + '%'
}, 1000 + index * 500);
});
$(function() {
$("#bars li .bar").each( function( index ) {
var percentage = $(this).data('percentage');
$(this).animate({
'height' : percentage + '%'
}, 1000 + index * 500);
});
});
@import "lesshat";
@import url(https://fonts.googleapis.com/css?family=Roboto:400+700);
body {
background: #30303A;
font-family: Roboto;
}
#chart {
width: 650px;
height: 300px;
margin: 30px auto 0;
display: block;
}
#chart #numbers {
width: 50px;
height: 100%;
margin: 0;
padding: 0;
display: inline-block;
float: left;
}
#chart #numbers li {
text-align: right;
padding-right: 1em;
list-style: none;
height: 29px;
border-bottom: 1px solid #444;
position: relative;
bottom: 30px;
}
#chart #numbers li:last-child {
height: 30px;
}
#chart #numbers li span {
color: #eee;
position: absolute;
bottom: 0;
right: 10px;
}
#chart #bars {
display: inline-block;
background: rgba(0,0,0,0.2);
width: 600px;
height: 300px;
padding: 0;
margin: 0;
box-shadow: 0 0 0 1px #444;
}
#chart #bars li {
display: table-cell;
width: 100px;
height: 300px;
margin: 0;
text-align: center;
position: relative;
}
#chart #bars li .bar {
display: block;
width: 70px;
margin-left: 15px;
background: #49E;
position: absolute;
bottom: 0;
}
#chart #bars li .bar:hover {
background: #5AE;
cursor: pointer;
}
#chart #bars li .bar:hover:before {
color: white;
content: attr(data-percentage) '%';
position: relative;
bottom: 20px;
}
#chart #bars li span {
color: #eee;
width: 100%;
position: absolute;
bottom: -2em;
left: 0;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chart">
<ul id="bars">
<li><div data-percentage="56" class="bar"></div><span>Option 1</span></li>
<li><div data-percentage="33" class="bar"></div><span>Option 2</span></li>
<li><div data-percentage="54" class="bar"></div><span>Option 3</span></li>
<li><div data-percentage="94" class="bar"></div><span>Option 4</span></li>
<li><div data-percentage="23" class="bar"></div><span>Option 5</span>
</li>
</ul>
</div>
To wait for the previous animation to finish, the delay can be calculated using the index.
$("#bars li .bar").each( function( index ) {
var percentage = $(this).data('percentage');
console.log(percentage)
$(this).delay(index * 1000).animate({
'height' : percentage + '%'
}, 1000);
});
$(function() {
$("#bars li .bar").each( function( index ) {
var percentage = $(this).data('percentage');
$(this).delay(index * 1000).animate({
'height' : percentage + '%'
}, 1000);
});
});
@import "lesshat";
@import url(https://fonts.googleapis.com/css?family=Roboto:400+700);
body {
background: #30303A;
font-family: Roboto;
}
#chart {
width: 650px;
height: 300px;
margin: 30px auto 0;
display: block;
}
#chart #numbers {
width: 50px;
height: 100%;
margin: 0;
padding: 0;
display: inline-block;
float: left;
}
#chart #numbers li {
text-align: right;
padding-right: 1em;
list-style: none;
height: 29px;
border-bottom: 1px solid #444;
position: relative;
bottom: 30px;
}
#chart #numbers li:last-child {
height: 30px;
}
#chart #numbers li span {
color: #eee;
position: absolute;
bottom: 0;
right: 10px;
}
#chart #bars {
display: inline-block;
background: rgba(0,0,0,0.2);
width: 600px;
height: 300px;
padding: 0;
margin: 0;
box-shadow: 0 0 0 1px #444;
}
#chart #bars li {
display: table-cell;
width: 100px;
height: 300px;
margin: 0;
text-align: center;
position: relative;
}
#chart #bars li .bar {
display: block;
width: 70px;
margin-left: 15px;
background: #49E;
position: absolute;
bottom: 0;
}
#chart #bars li .bar:hover {
background: #5AE;
cursor: pointer;
}
#chart #bars li .bar:hover:before {
color: white;
content: attr(data-percentage) '%';
position: relative;
bottom: 20px;
}
#chart #bars li span {
color: #eee;
width: 100%;
position: absolute;
bottom: -2em;
left: 0;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chart">
<ul id="bars">
<li><div data-percentage="56" class="bar"></div><span>Option 1</span></li>
<li><div data-percentage="33" class="bar"></div><span>Option 2</span></li>
<li><div data-percentage="54" class="bar"></div><span>Option 3</span></li>
<li><div data-percentage="94" class="bar"></div><span>Option 4</span></li>
<li><div data-percentage="23" class="bar"></div><span>Option 5</span>
</li>
</ul>
</div>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments