如何從底部到頂部動畫條形圖？

Question

我正在試圖製作一個條形圖和酒吧動畫，現在從上到下，但我希望它從下到上進行動畫製作。我怎樣才能從底部到頂部？

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

<div id="content"> 
<ul> 
    <li> 
    <div class="bar"> 
     <p><span>50%</span></p> 
    </div><br> 
    Freshmen      
    </li> 
</ul> 
</content> 

的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); 
     }); 
    }); 
}); 

"click here to see it in jsfiddle"

Answer 1

您可以定義位置：絕對到您的吧。像這樣寫：

.bar { 
width:50px; 
height:250px; 
list-style-type:none; 
    position:relative; 
} 
.bar p { 
background-color:#63F; 
    position:absolute; 
    bottom:0; 
    left:0; 
} 

入住這http://jsfiddle.net/6zqSS/1/

Answer 2

你也做到這一點使用CSS關鍵幀，例如用於WebKit的http://jsfiddle.net/kudoslabs/YddaY/

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>​ 

Answer 3

http://jsfiddle.net/chovy/6zqSS/2/

.bar { 
    position: relative; 
} 


.bar p { 
    position: absolute; 
    bottom: 0; 
} 

Answer 4

http://jsfiddle.net/t4THf/5/

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

<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

$(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); 
     }); 
    }); 
}); 

點擊這裏查看demo