jquery 添加菜单幻灯片动画

vhipe2zx 于 2023-08-04 发布在 jQuery

关注(0)|答案(2)|浏览(94)

我做了一个按钮，当你点击它的时候，一个固定的菜单出现在右边，当你点击十字的时候，它相应的关闭
我怎样才能使它，当你点击按钮，这个菜单不会立即出现，但顺利地滑出的权利？
关闭时也一样，这样就能顺利地隐藏回去

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>

jquery

来源：https://stackoverflow.com/questions/76748644/add-menu-slide-animation

2条答案

按热度按时间

bfhwhh0e1#

所以你要替换menuGeneral.css（“display”，“block”）;使用滑动动画。并替换menuGeneral.css（“display”，“none”）;用滑动动画关闭菜单。

<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;
}

型

赞(0）回复(0）举报 2023-08-04

zpjtge222#

jQuery animate()可用于随时间改变CSS属性

赞(0）回复(0）举报 2023-08-04