.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

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!

**[This might help you](http://stackoverflow.com/a/11836949/2065039)** — Guruprasad J Rao, Jan 02 '17 at 04:17

score 2 · Accepted Answer · edited May 23 '17 at 12:16

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>

score 1 · Answer 2 · answered Jan 02 '17 at 04:22

i think this issue with your table, i have put a div before the table, now the issue is solved

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

});

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;
  float:left;
  background-color: #fff;
  z-index: 8;
  top:0;
}
#menu table {
 width:100%;
}

tr {
  height: 50px;
}

<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

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

2 Answers2