如何：第一次点击动画 1，第二次点击动画 2

Question

我即将构建一个动画如下的移动汉堡菜单：

1) 在汉堡菜单上单击 1：菜单打开动画...导航链接淡入最后
2) 在汉堡菜单上单击 2：导航链接首先淡出...菜单关闭动画

我正在使用 jQuery 制作动画：

/* mobile menu fx */
$(document).ready(function(){

    $('#nav-icon4').click(function(){
        $(this).toggleClass('open');
        $('#mobile-menu').toggleClass('open');
        $('#mobile-menu-elements').toggleClass('open');
        $('#mobile-menu-blurredBg').toggleClass('open');
        $('#mobile-menu-elements-ul').toggleClass('open');
    });

});

如何为第二次点击（关闭菜单）设置不同的 class？

Answer 1

如果你想在JS端做，你试试加个计数变量，看看行不行：

/* mobile menu fx */
$(document).ready(function(){

    var count = 0;

    $('#nav-icon4').click(function(){
       if(count == 0){
           // do something in the first click;
           count++;
       } else{
           // do something in the second click;
            count=0;;
       }
    // Dont know which one goes in the first or in the second click
    $(this).toggleClass('open');
    $('#mobile-menu').toggleClass('open');
    $('#mobile-menu-elements').toggleClass('open');
    $('#mobile-menu-blurredBg').toggleClass('open');
    $('#mobile-menu-elements-ul').toggleClass('open');
    });

});

我知道它有点脏，可能有更好的方法。我还没有检查它是否有效，但这只是其中之一，希望对您有所帮助。

如何：第一次点击动画 1，第二次点击动画 2

HowTo: First click animation 1, second click animation 2

javascript

navigation

jquery

animation

hamburger-menu