jQuery滑動來自左下或右下

Question

我想解決爲什麼我的滑動頁腳菜單...它應該是直線上升，而是要麼從左下角角落或右下角，取決於left: 0或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（），它的工作沒有錯。（有人注意到別的它闡明）。

感謝您的建議！