.slideToggle() hides element when it reaches the top of the page, animation appears cut short

Question

I'm creating a mobile navigation that slides down, and I'm using .slideToggle() to animate it

fiddle

html

<table id=menu>
 <tr>
  <td align="center">link</td>
  <td align="center">link</td>
 </tr>
 <tr>
  <td align="center">link</td>
  <td align="center">link</td>
 </tr>
 <tr>
  <td align="center">link</td>
  <td align="center">link</td>
</tr></table>

css

#menu {
  display: none;
  position: absolute;
  margin-top: 50px;
  width: 100%;
  height: 150px;
  background-color: #fff;
  z-index: 8;
}

tr {
  height: 50px;
}

js

$(".toggle").click(function() {
    $("#drop").toggleClass('flip');
    $("#menu").slideToggle(300);
});

but the table is taller than my header and when the it slides to the top of the page it just disappears instead of finishing the slide animation (see fiddle).

Any way to solve this? Or a better animation to use?

Thanks!

Answer 1

What you're seeing is the margin-top animating - but jQuery cannot animate the height of a <table> element (more info in similar thread). Wrap the <table> in a <div> element and animate that, like so:

$(document).ready(function() {
  $(".toggle").click(function() {
    $("#drop").toggleClass('flip');
    $("#menu").slideToggle(300);
  });
});

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
header {
  background-color: #fff;
  height: 50px;
  width: 100%;
  position: absolute;
  box-shadow: 0px 1px 3px #d3d3d3;
  z-index: 9;
}
#drop {
  height: 15px;
  position: absolute;
  margin-left: 15px;
  margin-top: 18px;
  -moz-transition: transform .5s;
  -webkit-transition: transform .5s;
  transition: transform .5s;
}
.flip {
  transform: rotate(-180deg);
}
#menu {
  display: none;
  position: absolute;
  margin-top: 50px;
  width: 100%;
  height: 150px;
  background-color: #fff;
  z-index: 8;
}
#menu table {
  width: 100%;
}
tr {
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<header>
  <img alt=menu class="toggle" id="drop" src=# />
</header>

<div id="menu">
  <table>
    <tr>
      <td align="center">link</td>
      <td align="center">link</td>
    </tr>
    <tr>
      <td align="center">link</td>
      <td align="center">link</td>
    </tr>
    <tr>
      <td align="center">link</td>
      <td align="center">link</td>
    </tr>
  </table>
</div>