How do I toggle jQuery functions in order?

Question

I have a menu that is animated to slide from the right when clicking an icon. What I'd like to happen is for the menu's container to slide out and then the list to become visible and the reverse (list fade out then container slide away) when toggled. Currently everything happens at once.

This is where I'm at:

j$(".burger").click(function(){
    j$(".thenavigation").animate({width:'toggle'},350);
    j$(".nav ul").toggleClass("navshow");
});


<div class="burger"></div>
<div class="thenavigation">
    <nav class="nav" role="navigation">
        <ul>.....</ul>
    </nav>
</div>

Answer 1

JQuery's animate accepts a callback function which executes once the animation is done, meaning you can do the following.

j$(".burger").click(function(){
    j$(".thenavigation").animate({width:'toggle'},350, function() {
        j$(".nav ul").toggleClass("navshow");
    });
});