英文:
Add menu slide animation
问题
当您点击按钮时，可以通过添加动画效果使菜单平滑地向右滑出。同样，关闭时也可以使其平滑地隐藏回去。
let menuGeneral = $('#menu-general');
$('#menu-up-control').click(function () {
menuGeneral.animate({ right: '0' }, 500); // 使用动画效果向右滑出，可以调整时间以控制速度
});
$('#menu-up-control-close').click(function () {
menuGeneral.animate({ right: '-350px' }, 500); // 使用动画效果向左滑回，可以调整时间以控制速度
});
您可以使用jQuery的animate方法来实现平滑的滑动效果。在这里，我们通过更改right属性来控制菜单的位置，从而实现滑动效果。您可以调整500的值来改变动画的速度。
请注意，您可能需要调整其他样式和元素来适应这些变化。
英文:
I made a button, when you click on it, a fixed menu appears on the right, when you click on the cross, it closes accordingly
How can I make it so that when you click on the button, this menu does not instantly appear, but smoothly slides out to the right?
The same when closing, so that it smoothly hides back
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let menuGeneral = $('#menu-general');
$('#menu-up-control').click(function () {
menuGeneral.css("display", "block");
});
$('#menu-up-control-close').click(function () {
menuGeneral.css("display", "none");
});
<!-- language: lang-css -->
.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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案1
得分: 1
jQuery的animate()可以用来随着时间改变CSS属性。
英文:
jQuery animate() can be used to change CSS properties over time
答案2
得分: 1
所以你想要用滑动动画来替换menuGeneral.css("display", "block");
以及用滑动动画来替换menuGeneral.css("display", "none") 来关闭菜单。
css:
.menu-general {
position: fixed;
width: 350px;
top: 0;
right: -350px;
bottom: 0;
z-index: 9999;
padding: 10px;
background-color: black;
}
<details>
<summary>英文:</summary>
so you want to replace the menuGeneral.css("display", "block"); with the sliding animation.
and also replace the menuGeneral.css("display", "none"); with the sliding animation to close the menu.
<script>
let menuGeneral = $('#menu-general');
$('#menu-up-control').click(function () {
menuGeneral.animate({ right: '0' }, 500);
});
$('#menu-up-control-close').click(function () {
menuGeneral.animate({ right: '-350px' }, 500, function () {
menuGeneral.hide();
});
});
</script>
css:
.menu-general {
position: fixed;
width: 350px;
top: 0;
right: -350px;
bottom: 0;
z-index: 9999;
padding: 10px;
background-color: black;
}
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论