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

Question

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

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

$('#nav-button').click(function () {

    $("#slidermenu").animate({right: "0px"}, 200);

    $("body").animate({right: "300px"}, 200);    

});

我查找了 animate 方法，发现它有一个名为 done 的函数，它有两个参数。一个 promise 和一个 bool 值。所以我想我可以使用 if-statement 来检查动画是否完成，如果动画完成，按钮会将 slider 菜单发送回来。

但是我如何测试 animate().done() 是否为真？还是有更简单的方法来实现这一目标？

这是我的 fiddle 。

Answer 1

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

在您想要做的事情的背景下:

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

顺便说一句:

我现在只尝试在可能的情况下使用 CSS 来完成此操作。如果您使用 jQuery toggleClass 并在 CSS 中为切换类预定义 right 属性，则可以添加 CSS 过渡来处理动画。只是认为值得一提(这确实带来了它自己的兼容性问题)。