使用打开和关闭事件处理程序 Jquery 切换菜单动画答案

【问题标题】：Toggle menu animation with on and off event handlers Jquery使用打开和关闭事件处理程序 Jquery 切换菜单动画
【发布时间】：2015-08-31 09:10:42
【问题描述】：

我无法理解 on() off() 事件处理逻辑。

我的问题很简单——我有一个按钮可以打开/关闭菜单和菜单本身。如果在动画完成之前再次单击按钮，我希望它停止当前动画滑入。到目前为止，它要么出来并停留在那里，要么动画被链接，即它最终滑出两倍。

我的代码：

<div class="menu-button"></div>
<div class="animate-menu"></div>

我的 Jquery 代码：

$('.menu-button').on('click', toggleMenu);

        function toggleMenu(e){

            var isMenuOpen = false;
            if(!isMenuOpen){
                $('.animate-menu').stop().animate({'right':'0'},300, function(){
                    isMenuOpen = true;
                });
            }
            else {
                $('.animate-menu').stop().animate({'right':'-200px'},300, function(){
                    isMenuOpen = false;
            });
        }
    }

在这里工作的 jsfiddle 示例：jsfiddle

我知道我必须使用 on 和 off，但我只是不知道如何 :(

【问题讨论】：

标签： jquery animation

【解决方案1】：

试试这个：你将var isMenuOpen = false 保留在函数内部，因此每次调用函数时它总是错误的。将其保留在函数之外。

完成动画后，您将更改 isMenuOpen 的值，因此当您想要停止向右滑动动画时，它不会获得 isMenuOpen 的实际值，并且再次转到 if 部分而不是 else 部分。所以在 if / else 部分的第一行更改isMenuOpen。

var isMenuOpen = false;
$('.menu-button').on('click',
        function (e){
            $('.animate-menu').stop();
            if(!isMenuOpen){
                isMenuOpen = true;
                $('.animate-menu').animate({'right':'0'},2000, function(){
                    
                });
            }
            else {
                isMenuOpen = false;
                $('.animate-menu').animate({'right':'-200px'},2000, function(){
            });
        }
    }
);

JSFiddle Demo

编辑 - 请不要说我已将过渡时间从 300 增加到 2000 以显示效果。您可以将其还原为 300。

【讨论】：

感谢 JQuery 解决方案！

【解决方案2】：

您可以在下面使用这个简单的代码：-- jQuery

$('.menu-button').click(function(){
    $('.animate-menu').toggleClass('opened');
});

HTML

<div class="menu-button">M</div>
<div class="animate-menu"></div>

CSS

body{
    overflow-x:hidden;    
}
    .menu-button {
        height: 20px;
        width: 20px;
        background: red;
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        color: white;
    }

.animate-menu {
        height: 200px;
        width: 200px;
        background: red;
        position: absolute;
        top: 0;
        right: -200px;
        transition:all 5s;
    }
.animate-menu.opened{
    right:0;
}

在jsfiddle查看现场演示

【讨论】：

感谢您提供替代解决方案！