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

Menu toggle different animation on every second click?

本文关键字：动画 一次 单击 菜单      更新时间：2023-09-26

我创建了一个小提琴

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

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

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

在你切换类"打开"后，你必须做如下操作：

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/

相关文章：