slideDown behaviour on hover with inner divs being absolute
<p>Here is something that I can't figure it out.</p>

<p>Here is a simple example: <a href="http://jsfiddle.net/MrkMZ/" rel="nofollow">http://jsfiddle.net/MrkMZ/</a></p>

<p>HTML:</p>

<pre><code>&lt;div id="box"&gt;
    &lt;div id="top"&gt;&lt;a href="#"&gt;top text&lt;/a&gt;&lt;/div&gt;
    &lt;div id="bottom"&gt;&lt;a href="#"&gt;bottom text&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>#box {
    width: 200px;
    height: 200px;
    background-color: yellow;
    position: relative;
}
#top {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 50px;
    background-color: #ff0000;
}
#top a {
    margin-top: 20px;
    display: inline-block;
}
#bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200px;
    height: 30px;
    background-color: #ff0000;
}
</code></pre>

<p>JS:</p>

<pre><code>$('#box').hover(
    function(){
        $(this).find('#top, #bottom').slideUp(300);
    },
    function(){
        $(this).find('#top, #bottom').slideDown(300);
    }
);
</code></pre>

<p>As you can see, on box hover the top and bottom divs slide correctly but the text inside the top and bottom divs behave differently when sliding. The top text stays while the bottom text slides down with the div.</p>

<p>Anyway to make even the top text slide? Or make the bottom text stay instead of sliding.</p>

<p>On slideDown/slideUp jQuery changes the height of the element.</p>

<p>The only difference is that one has top: 0 and bottom one has bottom: 0. That alone makes this weird effect.</p>

<p>What am I missing here?</p>
