如何通过jQuery实现菜单切换并添加slideOutLeft/slideInLeft动画效果

1 无需display切换的动画实现原理 #

完全可以不用修改display属性实现需求，核心思路是通过transform、opacity和z-index三个属性控制菜单的显隐和动画：

• transform: translateX(-100%)将隐藏状态的菜单移出左侧视口，不会占用页面空间，也不会打断动画
• 用transition属性给位移和透明度添加过渡效果，天然支持滑入滑出动效
• 用z-index控制显示层级，保证当前激活的菜单在最上层可交互

该方案相比修改display性能更好，transform属性会触发GPU加速，不会导致页面重排，动画流畅度更高。

2 代码优化思路 #

原有代码两个切换函数逻辑高度重复，可通过事件委托+自定义属性合并为一套通用逻辑，后续新增菜单也无需修改JS代码，扩展性更强：

• 给切换按钮添加data-target自定义属性，标注点击后要切换到的目标菜单选择器
• 统一监听所有切换按钮的点击事件，动态获取目标菜单，无需给每个按钮单独绑定监听
• 添加动画状态锁，避免切换过程中重复点击导致的动画错乱

3 完整修改后代码 #

CSS代码 #

/* 删掉原有.show-nav、.hide-nav的display规则，替换为以下内容 */
.sidebar {
    /* 通用侧边栏属性，两个菜单共用，减少重复代码 */
    padding: 20px;
    position: fixed;
    left: 0;
    top: 0;
    width: 180px;
    height: 100vh;
    transition: all 0.3s ease; /* 统一过渡效果 */
    opacity: 0;
    transform: translateX(-100%); /* 默认隐藏在视口外 */
    z-index: 1;
    pointer-events: none; /* 隐藏状态不可点击 */
}
.sidebar.active {
    opacity: 1;
    transform: translateX(0);
    z-index: 10;
    pointer-events: auto; /* 激活状态可交互 */
}

/*user*/
.user-sidebar {
    background: red;
}

.user-sidebar ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
}

.user-sidebar ul li {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    text-align: left;
    margin-bottom: 20px;
}

.user-sidebar ul li a {
    color: #fff;
    text-decoration: none;
}

.user-sidebar ul li a:hover {
    color: yellow;
}

.switch-btn {
    border: 1px solid blue;
    padding: 10px;
    display:block;
    width:100%;
    text-align: center;
    text-decoration: none;
    background: yellow;
    color: blue;
    box-sizing:border-box;
}

.switch-btn:hover {
    background: #fff;
}

.user-sidebar .sidebar-footer {
    margin-top: 20vh;
}


/*admin*/
.admin-sidebar {
    background: green;
}

.admin-sidebar ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
}

.admin-sidebar ul li {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    text-align: left;
    margin-bottom: 20px;
}

.admin-sidebar ul li a {
    color: #fff;
    text-decoration: none;
}

.admin-sidebar ul li a:hover {
    color: yellow;
}


.admin-sidebar .sidebar-footer {
    margin-top: 20vh;
}

JS代码 #

$(document).ready(function () {
    let isAnimating = false; // 动画状态锁

    // 统一监听所有切换按钮点击
    $("body").on("click", ".switch-btn", function (e) {
        e.preventDefault();
        // 动画执行中禁止重复触发
        if (isAnimating) return;
        isAnimating = true;

        const targetMenu = $($(this).data("target")); // 获取要切换到的目标菜单
        const currentMenu = $(".sidebar.active"); // 当前激活的菜单

        // 先给当前菜单添加滑出动画（移除active类自动触发过渡）
        currentMenu.removeClass("active");

        // 等待当前菜单滑出动画完成后，再触发新菜单滑入
        setTimeout(() => {
            targetMenu.addClass("active");
            // 动画完成后解锁
            setTimeout(() => {
                isAnimating = false;
            }, 300); // 和CSS过渡时间保持一致
        }, 300); // 和CSS过渡时间保持一致
    });
});

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--User Sidebar 新增sidebar类-->
<nav class="user-sidebar sidebar active">
    <ul>
        <li class="active">
            <a href="user_test_1.html"><span>User Test 1</span></a>
        </li>
        <li>
            <a href="user_test_2.html"><span>User Test 2</span></a>
        </li>
    </ul>

    <div class="sidebar-footer">
            <!-- 新增data-target属性指定要切换到的菜单 -->
            <a href="javascript:void();" id="to_admin_menu" class="switch-btn" data-target=".admin-sidebar"><span>切换到Admin菜单</span></a>
    </div>

</nav>

<!--Admin Sidebar 新增sidebar类-->
<nav class="admin-sidebar sidebar">
    <ul>
        <li class="active">
            <a href="admin_test_1.html"><span>Admin Test 1</span></a>
        </li>
        <li>
            <a href="admin_test_2.html"><span>Admin Test 2</span></a>
        </li>
    </ul>

    <div class="sidebar-footer">
            <!-- 新增data-target属性指定要切换到的菜单 -->
            <a href="javascript:void();" id="to_user_menu" class="switch-btn" data-target=".user-sidebar"><span>切换到User菜单</span></a>
    </div>

</nav>

内容的提问来源于stack exchange，提问作者laurence keith albano