 <pre><code>#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; } &lt;div id="graph_bg"&gt; &lt;div id="graph_bar"&gt;&lt;/div&gt; &lt;div id="pop"&gt;&lt;/div&gt; &lt;/div&gt; $("#graph_bar").animate({"top":"50px"} ,2000 ,function(){ $("#pop").show(); } ); </code></pre> <p><a href="http://jsfiddle.net/zacwolf/cgsdcwp3/1/" rel="nofollow">http://jsfiddle.net/zacwolf/cgsdcwp3/1/</a></p> <p>Since I didn't have your images I used background-colors instead, but you could just change those to background-image to use your images. The thing you were missing is that the background container needs to be the parent to the other two elements, then you can use "overflow-hidden" in the background container, and set the initial absolute position of the bar so that it is outside the visible limits of the background container. Then you just animate it to the "top" position where you want it to be. Also, you forget the # in your show()</p>