显示和隐藏滑动菜单的按钮

Button that displays and hides a sliding menu

本文关键字：菜单 按钮 隐藏 显示      更新时间：2023-09-26

我正在尝试构建一个带有触发滑动菜单的菜单按钮的标题。我可以在按下按钮时显示菜单，但我也希望在再次单击按钮时它消失。

这是单击按钮时触发的事件。

$('#nav-button').click(function () {
    $("#slidermenu").animate({right: "0px"}, 200);
    $("body").animate({right: "300px"}, 200);    
});

我查找了 animate 方法，看到它有一个名为 done 的函数，它有两个参数。一个承诺和一个布尔值。所以我想我可以使用 if 语句来检查动画是否完成，如果动画完成，按钮会将滑块菜单发送回去。

但是我如何测试animate（）.done（）是否为真呢？还是有更简单的方法来实现这一点？

这是我的小提琴。

如果

当前正在动画化.is(':animated')将返回true。

在您尝试执行的操作的上下文中：

if(!$('#slidermenu').is(':animated'))
{
  // Animation has finished
}

顺便说一句：

我尝试仅在可能的情况下使用CSS执行此操作。如果使用 jQuery toggleClass并在 CSS 中为切换类预定义right属性，则可以添加 CSS 过渡来处理动画。只是认为值得一提（这确实伴随着它自己的兼容性问题）。

就像DeeMac说的那样，最好用css transition而不是jQuery animate来做到这一点。但只是为了添加一个选项，我将尝试向您展示如何使其也与jQuery animation一起使用。

首先，无需

检查动画是否仍在运行，只需在开始另一个动画之前stop正在进行的动画即可。它将使按钮立即响应用户的单击。

要了解菜单是否打开，您可以使用 toggleClass .通过这种方式，您只需使用hasClass来确定需要朝哪个方向对菜单进行动画处理。

所以，我想到了：

$('#nav-button').click(function () {
    $("#slidermenu").stop();
    animateToPosition = "0px";
    if ($("#slidermenu").hasClass("open")) {
        animateToPosition = "-300px";
    }
    $("#slidermenu").toggleClass("open");
    $("#slidermenu").animate({
        right: animateToPosition
    }, 200);
});

我做了一个演示。如果您要使用css解决方案，那很好。也许这将在未来帮助其他人。

相关文章：