javascript - 如何使用 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() 中的#