.slideToggle（）隐藏元件当它到达页面的顶部，动画出现剪短

Question

我创建一个移动导航即向下滑动，并且我使用.slideToggle（）以动画它

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

，但该表比我的头更高，当它的幻灯片给它就会消失，而不是完成幻灯片动画页面的顶部（见小提琴）。

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

谢谢！

Answer 1

你看到的是margin-top动画 - 但jQuery不能动画元素的高度（more info in similar thread）。包裹<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(){ 
 
\t $(".toggle").click(function() { 
 
\t  //$("#drop").toggleClass('flip'); 
 
\t  $("#menu").slideToggle(400); 
 
\t }); 
 

 
});

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 { 
 
\t 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>