如何使用 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/

因为我没有你的图片，所以我使用了背景颜色，但你可以将它们更改为背景图片以使用你的图片。你缺少的是背景容器需要是其他两个元素的父元素，然后你可以在背景容器中使用 "overflow-hidden" ，并设置栏的初始绝对位置，使其在背景容器的可见限制。然后你只需将它动画化到你想要的 "top" 位置。另外，您忘记了 show()

中的#

如何使用 jQuery 将动画添加到条形图？

How to add animation to a bar graph with jQuery?

javascript

css

jquery