Menu toggle different animation on every second click?

Question

I've created a fiddle

http://jsfiddle.net/d9wf1s44/

When I click the hamburger menu, the breadcrumbs toggles away to right, and after that the function executes which shows the menu.

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

Now the issue is that when I click again, naturally, the same thing will happen, the breadcrumb will toggle and menu will fade out. It's just that I'd like first the menu to fade out, and then the menu to toggle in. How can I do that? animate is used for css manipulation and I tried doing everything with css transitions and delay, but couldn't achieve the nice result like here, I like the toggle animation that the breadcrumbs has, so that's why I'm using toggle (also the breadcrumbs get display none, so the menu is right next to the icon).

How can I control what happens on second click? How to separate this?

Answer 1

You have to make alternate animation for close the menu

after you toggle class "open", you have to do as below :

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

you can check my jsfiddle demo http://jsfiddle.net/euds0n6x/