Javascript 菜单切换每秒钟点击不同的动画？

我创造了一把小提琴

当我单击汉堡包菜单时，面包屑会向右切换，然后执行显示菜单的函数

        $menu_toggle.on('click', function(e){
            e.preventDefault();
            $(this).toggleClass('open');
            breadcrumbs_bar.toggle('slide', {direction:'right'}, 800, function(){
                $navigation.fadeToggle(600);
            });
        });

现在的问题是，当我再次点击时，同样的事情自然会发生，面包屑会切换，菜单会淡出。只是我想先淡出菜单，然后切换菜单。我该怎么做

animate

用于css操作，我尝试使用css转换和延迟来完成所有操作，但无法获得像这里这样的好结果，我喜欢面包屑的切换动画，所以这就是为什么我使用toggle（面包屑也没有显示，所以菜单就在图标旁边）

---

如何控制第二次单击时发生的情况？如何将其分开？

您必须制作备用动画以关闭菜单

切换类“打开”后，必须执行以下操作：

if($(this).hasClass('open')){ //open function
     breadcrumbs_bar.toggle('slide', {direction:'right'}, 800, function(){
         $navigation.fadeIn(600);
     });
}else{
     $navigation.fadeOut(600, function(){
         breadcrumbs_bar.toggle('slide', {direction:'right'}, 800)
     });
}

---

您可以查看我的JSFIDLE演示

Move e.preventDefault（）；在点击功能的末尾——然后我会看看确保在下一个开始之前一个淡入淡出已经完成的承诺——谷歌“JQuery承诺完成”就是这样。我只是做了一些类似的事情，但我在header中添加了一个类，然后检查header是否打开了class

，然后反转切换，但您的方式更有效！谢谢！：）