jQuery Slide-Upが左下または右下のいずれかから来ています

Question

私はなぜスライドアップのフッターメニューを作成しようとしています...まっすぐに来るはずですが、その代わりに左下またはright: 0が、.footerbar cssから削除されているかどうかに応じて、右下隅または下隅に表示されます。

アイデアをいただければ幸いです。それは私の地獄を迷惑にしています。 :-(

私が現在だ場所です...

$('#footerNav').addClass('slide-down'); 
 

 
function openNav() { 
 
    $(document).ready(function() { 
 
    $('#footerNav').toggle(function() { 
 
     if ($('#footerNav').hasClass('slide-up')) { 
 
     $('#footerNav').addClass('slide-down', 1000); 
 
     $('#footerNav').removeClass('slide-up'); 
 
     } else { 
 
     $('#footerNav').removeClass('slide-down'); 
 
     $('#footerNav').addClass('slide-up', 1000); 
 
     } 
 
    }); 
 
    }); 
 
}

.footerbar a { 
 
    padding: 8px 8px 8px 10px; 
 
    text-decoration: none; 
 
    font-size: 13px; 
 
    color: #818181; 
 
    display: block; 
 
} 
 

 
.footerbar a:hover, 
 
.footerbar a:focus { 
 
    color: #046B86; 
 
} 
 

 
.footerbar { 
 
    position: fixed; 
 
    width: 100%; 
 
    z-index: 10000; 
 
    text-align: center; 
 
    height: 500px; 
 
    font-size: 18px; 
 
    color: #000; 
 
    background: #FFF; 
 
    display: flex; 
 
    justify-content: center; 
 
    border-top-left-radius: 25px; 
 
    border-top-right-radius: 25px; 
 
    right: 0; 
 
    left: 0; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    bottom: -60px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<a href="#" onClick="openNav()">footer tray</a> 
 
<br> 
 
<br> 
 
<br> 
 

 
<div id="footerNav" class="footerbar"> 
 
    <table width="100%" border="0"> 
 
    <tr> 
 
     <td> 
 
     <a href="#">Stuff</a> 
 
     <a href="#">Stuff</a> 
 
     <a href="#">Stuff</a> 
 
     <a href="#">Stuff</a> 
 
     <a href="#">Stuff</a> 
 
     <a href="#">Stuff</a> 
 
     <a href="#">Stuff</a> 
 
     <a href="#">Stuff</a> 
 
     <a href="#">Stuff</a> 
 
     </td> 
 
     <td> 
 
     <a href="#">Stuff</a> 
 
     <a href="#">Stuff</a> 
 
     <a href="#">Stuff</a> 
 
     <a href="#">Stuff</a> 
 
     <a href="#">Stuff</a> 
 
     <a href="#">Stuff</a> 
 
     <a href="#">Stuff</a> 
 
     <a href="#">Stuff</a> 
 
     <a href="#">Stuff</a> 
 
     </td> 
 
     <td> 
 
     <a href="#">Stuff</a> 
 
     <a href="#">Stuff</a> 
 
     <a href="#">Stuff</a> 
 
     <a href="#">Stuff</a> 
 
     <a href="#">Stuff</a> 
 
     <a href="#">Stuff</a> 
 
     <a href="#">Stuff</a> 
 
     <a href="#">Stuff</a> 
 
     <a href="#">Stuff</a> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 1

のみ.slideUp（）を使用し、それが故障せずに働いていたにそれを変更した後。（誰かを取りそうでなければに光を当てること）。提案のための

ありがとう！