.slideToggle（）は要素を隠し、アニメーションが短い

Question

をカット私が滑り落ちるモバイルナビゲーションを作成しています、と私はそれを

fiddleをアニメーション化する.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>要素（more info in similar thread）の高さをアニメートできません。 <div>要素で<table>をラップなどのように、それをアニメーション化：

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