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

我正在尝试使用菜单按钮构建标题，以触发滑动菜单。 当我按下按钮时，我可以显示菜单，但是当我再次单击按钮时，我也希望它消失。

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

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

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

但是如何测试animate（）。done（）是否为真？ 或者是否有更简单的方法来实现这一目标？

这是我的小提琴 。

Answer 1

.is(':animated')如果当前正在动画，则会返回true 。

在你想要做的事情的背景下：

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

作为旁白：

我尽可能在现在尝试使用CSS。 如果使用jQuery toggleClass并在CSS中为切换类预定义right属性，则可以添加CSS转换来处理动画。 只是觉得值得一提（这确实伴随着它自身的兼容性问题）。

Answer 2

就像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解决方案，那很好。 也许这将有助于将来的其他人。