Slide toggle in toggleClass

I am trying to slide toggle my twenty-thirteen mobile menu with slide toggle and it only slide down but it comes back quickly (no slide). I injected other code to make it slide but it is buggy. Here’s the original code

/**
 * Enables menu toggle for small screens.
 */
( function() {
    if ( ! nav || ! button ) {
        return;
    }

    // Hide button if menu is missing or empty.
    if ( ! menu || ! menu.children().length ) {
        button.hide();
        return;
    }

    button.on( 'click.twentythirteen', function() {
        nav.toggleClass( 'toggled-on' );
        if ( nav.hasClass( 'toggled-on' ) ) {
            $( this ).attr( 'aria-expanded', 'true' );
            menu.attr( 'aria-expanded', 'true' );
        } else {
            $( this ).attr( 'aria-expanded', 'false' );
            menu.attr( 'aria-expanded', 'false' );
        }
    } );

and here is what i added

jQuery(document).ready(function () {
jQuery("button").on("click", function () {
    jQuery( ".menu-primary-nav-container" ).slideToggle( "slow" );
});
});

Template link: https://twentythirteendemo.wordpress.com/