2

棒グラフを作成しようとしていますが、棒は現在上から下にアニメーション化されていますが、下から上にアニメーション化したいと考えています。下から上に移動するにはどうすればよいですか？

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

「jsfiddle で表示するには、ここをクリックしてください」

4

5 に答える 5

3

barにposition:absoluteを定義できます。次のように書きます。

.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/

于 2012-11-17T08:26:32.990 に答える
1

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>​
于 2012-11-17T08:59:36.610 に答える
0

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

.bar {
    position: relative;
}


.bar p {
    position: absolute;
    bottom: 0;
}
于 2012-11-17T09:49:10.300 に答える
0

キーフレームを使用して css プロパティをアニメーション化します。 

.animated-bar {
  animation: animateBar 0.25s ease-in;
  @keyframes animateBar {
    0% {
      width: 0;
    }
  }
}

<div class="animated-bar" style="width: 200px"><div>
于 2020-05-29T18:16:37.617 に答える