[英]how to animate bar chart from bottom to top?
I am trying to make a bar chart and the bar animates from top to bottom right now, but I want it to animate from bottom to top.我正在尝试制作一个条形图,现在条形图从上到下进行动画处理,但我希望它从下到上进行动画处理。 How do I get it go from bottom to top?
我如何让它从下到上?
CSS CSS
.bar {
width:50px;
height:250px;
list-style-type:none;
}
.bar p {
background-color:#63F;
}
.bar span {
padding-left:15px;
left:100%;
}
#content ul {
list-style-type:none;
}
#content ul li {
float:left;
margin:50px;
}
HTML HTML
<div id="content">
<ul>
<li>
<div class="bar">
<p><span>50%</span></p>
</div><br>
Freshmen
</li>
</ul>
</content>
Javascript Javascript
<script src="../../jquery-1.6.4.min.js"></script>
$(document).ready(function(){
$(".bar").each(function(){
var length = $(this).find("span").html();
$(this).find("p").delay(500).animate({'height':length},3500,function(){$(this).find("span").fadeIn(1000);
});
});
});
You can define position:absolute to your bar .您可以将position:absolute定义为您的bar 。 Write like this:
像这样写:
.bar {
width:50px;
height:250px;
list-style-type:none;
position:relative;
}
.bar p {
background-color:#63F;
position:absolute;
bottom:0;
left:0;
}
Check this http://jsfiddle.net/6zqSS/1/检查这个http://jsfiddle.net/6zqSS/1/
http://jsfiddle.net/t4THf/5/ http://jsfiddle.net/t4THf/5/
CSS CSS
.perfect
{
padding-top:30px;
width:500px;
height:300px;
position:relative;
background-color:#efefef;
}
.perfect .bar
{
float:left;
position:relative;
width:40px;
height:100%;
margin-left:5px;
}
.perfect .bar .slideup
{
position:absolute;
bottom:0px;
width:40px;
background-color:#fff000;
border:1px solid #000;
}
.perfect .bar .slideup span
{
display:block;
position:absolute;
margin:5px;
top:-30px;
}
HTML HTML
<div class="perfect">
<div class="bar">
<div class="slideup">
<span>20%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>30%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>10%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>70%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>100%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>50%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>60%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>55%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>70%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>70%</span>
</div>
</div>
</div>
JS JS
$(function(){
$(".bar").each(function(){
var length = $(this).find("span").html();
$(this).find(".slideup").delay(500).animate({'height':length},
"slow",function(){$(this).find("span").fadeIn(1000);
});
});
});
You could also achieve this using css keyframes, for example for webkit http://jsfiddle.net/kudoslabs/YddaY/您也可以使用 css 关键帧实现此目的,例如 webkit http://jsfiddle.net/kudoslabs/YddaY/
css CSS
dl{ position: relative ; height: 200px ; }
dt,dd{ position: absolute ; }
dd{ height: 70% ; width: 30px ; background: grey ; bottom: 20px ; -webkit-animation: animate-bar 1.25s 1 linear; }
dt{ bottom: 0 ; }
@-webkit-keyframes animate-bar{
0% {height: 0% ; }
}
html网页格式
<dl>
<dt>Freshman</dt>
<dd>70%</dd>
</dl>
http://jsfiddle.net/chovy/6zqSS/2/ http://jsfiddle.net/chovy/6zqSS/2/
.bar {
position: relative;
}
.bar p {
position: absolute;
bottom: 0;
}
Use keyframes to animate the css property, eg width Once you set the width of your element (eg div) the animation will kick in使用关键帧为 css 属性设置动画,例如宽度一旦设置了元素的宽度(例如 div),动画就会启动
.animated-bar {
animation: animateBar 0.25s ease-in;
@keyframes animateBar {
0% {
width: 0;
}
}
}
<div class="animated-bar" style="width: 200px"><div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.