How do I slide up a div off container with moving effect in jquery?
<p>This is my fiddle:</p>

<p><a href="https://jsfiddle.net/XiangXu/rf6tdw4s/17/" rel="nofollow">https://jsfiddle.net/XiangXu/rf6tdw4s/17/</a></p>

<pre><code>&lt;button id="slide"&gt;slide it&lt;/button&gt;
&lt;div id="slidebottom" class="slide"&gt;
  &lt;div class="innerTop" id="top"&gt;Slide from top&lt;/div&gt;
  &lt;div class="innerBottom" id="bottom"&gt;Slide from bottom&lt;/div&gt;
&lt;/div&gt;

.slide {
  position: relative;
  height: 100px;
  background-color: yellow;
}
.slide .innerTop {
  position: absolute;
  top: 0px;
}
.slide .innerBottom {
    position: absolute;
  bottom: 0px;
}

$("#slide").click(function() {
  $("#top").slideToggle();
  $("#bottom").slideToggle();
});
</code></pre>

<p>The bottom one is no problem which moves down off the container.
But the top one is like there is something erasing it from bottom to top instead of moving it! </p>

<p>How do I move it off the container like the bottom one?</p>