我做了一个按钮，当你点击它时，右边会出现一个固定的菜单，当你点击十字架时，它会相应地关闭
我怎么做才能让你点击按钮时，这个菜单不会立即出现，而是平滑地滑到右边？
关闭时也是如此，这样它就可以平稳地隐藏起来
let menuGeneral = $('#menu-general');
$('#menu-up-control').click(function () {
menuGeneral.css("display", "block");
});
$('#menu-up-control-close').click(function () {
menuGeneral.css("display", "none");
});.menu-up-control {
float:right;
font-size:26px;
top:3px;
position:relative;
cursor:pointer;
padding:10px 100px 0 0;
}
.menu-up-control-close {
width:15px;
}
.menu-up-control-close i {
color:white;
font-size:40px;
top:3px;
position:relative;
cursor:pointer;
padding:10px 0px;
margin:50px 0 0 40px;
}
.menu-general {
display:none;
}
.menu-general {
position:fixed;
width:350px;
top:0;
right:0;
bottom:0;
z-index:9999;
padding:10px;
background-color:black;
}
.menu-main li, .menu-main li a {
font-size:36px;
font-weight:700;
}
.menu-main li a {
font-weight:bold;
color:white;
text-decoration:none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css"
rel="stylesheet" type='text/css'>
<a id="menu-up-control" class="menu-up-control">
<i class="fa fa-bars"></i>
</a>
<div id="menu-general" class="menu-general">
<div id="menu-up-control-close" class="menu-up-control-close">
<i class="fa fa-times"></i>
</div>
<ul class="menu-main">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>