javascript - 菜单在每次点击时切换不同的动画？

Question

我创建了一个 fiddle

http://jsfiddle.net/d9wf1s44/

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

        $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 过渡和延迟做所有事情，但无法获得像这里这样的好结果，我喜欢面包屑的切换动画，所以这就是我的原因m 使用切换(面包屑也没有显示，所以菜单就在图标旁边)。

如何控制第二次点击时发生的情况？这个怎么区分？

Answer 1

您必须制作替代动画才能关闭菜单

将类切换为“打开”后，您必须执行以下操作:

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

你可以查看我的 jsfiddle 演示 http://jsfiddle.net/euds0n6x/