如何使用jQuery向條形圖添加動畫？

Question

我正在嘗試在jQuery中制作動畫條形圖，但是如何使條形從底部向上滑動？ 有酒吧和背景的圖像。 我在CSS上設置了位置，正在嘗試向欄中添加動畫。 欄顯示后，我想顯示一個彈出圖像。 動畫有效，但我想從底部開始顯示條。

  $(document).ready(function() { $(window).load(function(){ $("#graph_bar").animate({ "height":"toggle" },2000,function(){ $("pop").show(); }); }); }); 

  #graph_bg{ position:relative; } #graph_bar{ position: absolute; top:270px; left: 182px; display: none; } #pop{ position: absolute; top:50px; left: 50px; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img id="graph_bg" alt="graph_bg" src="graph_bg.jpg"/> <img id="graph_bar" alt="graph_bar" src="graph_bar.jpg"/> <img id="pop" alt="pop" src="image.jpg"/> 

Answer 1

#graph_bg{
    position:relative;
    width:350px;
    height:300px;
    background-color:yellow;
    overflow:hidden;
}

#graph_bar{
    position: absolute;
    top: 350px;
    left: 50px;
    height:300px;
    width:50px;
    background-color:blue;
}

#pop{
    position: absolute;
    top:50px;
    left: 50px;
    width:50px;
    height:50px;
    background-color:red;
    display: none;
}
<div id="graph_bg">
    <div id="graph_bar"></div>
    <div id="pop"></div>
</div>
 $("#graph_bar").animate({"top":"50px"}
                          ,2000
                          ,function(){
                            $("#pop").show();
                           }
                         );

http://jsfiddle.net/zacwolf/cgsdcwp3/1/

由於我沒有圖像，因此我使用背景色，但是您可以將其更改為背景圖像以使用圖像。 您所缺少的是，背景容器需要是其他兩個元素的父級，然后您可以在背景容器中使用“溢出隱藏”，並設置條形圖的初始絕對位置，以使其位於后台容器的可見限制。 然后，將其設置為所需的“頂部”動畫。 另外，您忘記了show（）中的＃