Question

我无法理解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

我明白我必须使用开关，但我不知道如何:(

Answer 1

试试这个：你将var isMenuOpen = false保留在函数内部，因此每次调用函数时它总是为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。

Answer 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

上的实时演示

使用on和off事件处理程序Jquery切换菜单动画

2 个答案: