Question

我创造了一个小提琴

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

        $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转换和延迟做一切，但是无法实现这里的好结果，我喜欢面包屑所具有的切换动画，所以这就是我使用切换的原因（面包屑也显示无，因此菜单就在图标旁边）。

如何控制第二次点击时会发生什么？如何分开？

Answer 1

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

切换课程＆＃34;打开＆＃34;后，您需要执行以下操作：

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 demo http://jsfiddle.net/euds0n6x/

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

1 个答案: