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

Question

我正在创建一个向下滑动的移动导航，我正在使用.slideToggle（）为其设置动画

小提琴

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);
});

但是桌子比我的标题更高，当它滑到页面顶部时它就会消失，而不是完成幻灯片动画（见小提琴）。

有办法解决这个问题吗？ 或者更好的动画使用？

谢谢！

Answer 1

您所看到的是margin-top动画 - 但jQuery无法为<table>元素的高度设置动画（ 类似线程中的更多信息 ）。 将<table>包装在<div>元素中并为其设置动画，如下所示：

 $(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

我认为这个问题与你的表，我已经在表前放了一个div，现在问题解决了

 $(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>