显示和隐藏滑动菜单的按钮 [英] Button that displays and hides a sliding menu

问题描述

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

I'm trying to build a header with a menu button that triggers a sliding menu. I can make the menu appear when I press the button, but I also want it to dissappear when I click the button again.

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

This is the event that triggers when the button is clicked.

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

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

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

});

我查找了动画方法，看到它有一个名为 done ，它需要两个参数。一个承诺和一个布尔值。所以我想我可以使用 if-statement 来检查动画是否完成，如果动画完成，按钮将会发送slideMenu。

I looked up the animate method and saw that it has a function called done, which takes two parameters. A promise and a boolean. So I figured I can use a if-statement to check if the animation is done, and if the animation is done, the button would send the slidermenu back.

但是，如果animate（）。done（）是否为true，我该如何测试？还是有一个更简单的方法来解决这个问题？

But how can I test if animate().done() is true? Or is there a more simple way of achiveing this?

这是我的小提琴。

推荐答案

.is（'：animated'）将返回 true 如果它正在动画。

.is(':animated') will return true if it's currently being animated.

在你想要做的事情的上下文中：

In the context of what you're trying to do:

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

另外：

我尽可能尝试用CSS做这个。如果您使用jQuery toggleClass 并预先定义CSS中的属性为切换类，则可以添加CSS转换来处理动画。只是想这是值得一提的（这确实来自于它自己的兼容性问题）。

I try and do this with CSS only now where possible. If you use jQuery toggleClass and predefine the right attributes in your CSS for the toggled classes, you can add a CSS transition to deal with the animation. Just thought it was worth mentioning (this does come with it's own compatibility issues).

这篇关于显示和隐藏滑动菜单的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！