导航菜单动画切换

Question

我有一个要切换的导航栏。第一个动画有效，但是我不知道如何将菜单滑回屏幕。

这是我的代码：

// SHOW NAVIGATION BAR
$("#menu-btn").click(function() {
    $("nav").animate({
        left: '270px'
    });
    $("#menu-btn").removeClass().addClass("#menu-btn-active");
});

// HIDE NAVIGATION BAR
$("#menu-btn-active").click(function() {
    $("nav").animate({
        left: '-270px'
    });
    $("#menu-btn-active").removeClass().addClass("#menu-btn");
});

感谢任何帮助！

Answer 1

您想对类使用类而不是 ID。此外，由于事件处理程序仅连接一次，因此在加载时它们在您更改这些类时不匹配。

您也没有更改动画（都将 nav 元素设置为 270 像素）。其中之一必须更改到其他地方。

注意：您不需要使用 px 和字符串来制作动画。它会自动将数字转换为像素值。

改为使用委托的事件处理程序，附加到不变的祖先元素：

例如像这样（使用类）

// SHOW NAVIGATION BAR
$(document).on('click', ".menu-btn", function() {
    $("nav").animate({
        left: '270px'
    });
    $(this).removeClass().addClass("menu-btn-active");
});

// HIDE NAVIGATION BAR
$(document).on('click', ".menu-btn-active", function() {
    $("nav").animate({
        left: '-270px'
    });
    $(this).removeClass().addClass("menu-btn");
});

委派事件处理程序将责任委托给祖先元素，然后在事件时间（不是事件注册时间）应用jQuery 选择器。这意味着它们只需要在偶数发生时匹配。

可以使用 toggleClass 将整个事情简化为单个处理程序，但这会让您暂时摆脱困境:)

例如

// HIDE NAVIGATION BAR
$(document).on('click', ".menu-btn", function() {
    $(this).toggleClass("active")
    $("nav").animate({
        left: $(this).hasClass('active') ? 270 : -270   // or wherever
    });
});

由于您不再动态更改连接样式，因此可以简化回：

// HIDE NAVIGATION BAR
$(".menu-btn").click(function() {
    $(this).toggleClass("active")
    $("nav").animate({
        left: $(this).hasClass('active') ? 270 : -270   // or wherever
    });
});

Answer 2

初始化时有多少个$("#menu-btn-active")$("#menu-btn-active").click()？ None。属性稍后将在您单击该元素时添加。所以这什么都不做。

为了获得适用于当前和未来元素的点击，请使用 $(document).on('click, "element", function()...

此外，使用类，而不是 ID：

$(document).on('click', ".menu-btn", function() {
    $("nav").animate({
        left: '270px'
    });
    $("#menu-btn").removeClass().addClass("menu-btn-active");
});

// HIDE NAVIGATION BAR
$(document).on('click', ".menu-btn-active", function() {
    $("nav").animate({
        left: '270px'
    });
    $("#menu-btn-active").removeClass().addClass("menu-btn");
});

Answer 3

你也可以试试这个。这是您正在寻找的 100% 工作。

<style type="text/css">
        .toggle{
            width: 100px;
            height: 50px;
            background: #f0f;
            left: 0;
            position: relative;
        }
    </style>

<div class="toggle"></div>
$(document).ready(function () {
            $('.toggle').on('click', function () {
                $(this).animate({
                    left: '27px'
                });
                $(this).addClass('active');
                $('.active').on('click', function () {
                    $(this).animate({
                        left: '0px'
                    });
                    $(this).removeClass('active');

                });
            });
        });

Demo

导航菜单动画切换

Navigation menu animate toggle

jquery

menu

navigation

jquery-animate

toggle