操作方法：第一次点击动画 1，第二次点击动画 2答案

【问题标题】：HowTo: First click animation 1, second click animation 2操作方法：第一次点击动画 1，第二次点击动画 2
【发布时间】：2016-04-27 14:29:54
【问题描述】：

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

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');
    });

});

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

【问题讨论】：

只需在您的 css 的不同类中定义您的关闭菜单。当您打开类时，它会松开它并重新加载主要的 css 值。

标签： javascript jquery animation navigation hamburger-menu

【解决方案1】：

如果你想在JS端做，为什么不尝试添加一个count变量，看看是否有效：

/* 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');
    });

});

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

【讨论】：