.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>