.slideToggle（）在到达页面顶部时隐藏元素，动画显示为短剪辑

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> 

Answer 2

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>