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

Question

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

fiddle

HTML

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.CardView
        style="@style/CardLayout">

        ...

CSS

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

JS

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

tr {
  height: 50px;
}

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

有什么方法可以解决这个问题？或者使用更好的动画？

谢谢！

Answer 1

您看到的是margin-top动画效果 - 但jQuery无法为<table>元素（more info in similar thread）的高度设置动画。将<table>包裹在<div>元素中并为其设置动画，如下所示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

＆＃13;

＆＃13;

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

});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;