导航菜单以动画形式切换

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元素的动画设置为 270px）。其中一个必须更改为其他地方。

注： 您不需要将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").click()时有多少个$("#menu-btn-active")？没有。稍后单击元素时将添加该属性。所以这没有任何作用。

为了获得适用于当前和未来元素的点击，请使用$(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');
                });
            });
        });

演示