Javascript 如何在推送菜单中显示和隐藏元素

您能告诉我，如何在第一次单击“.push menu inside”中的元素时，通过一些过渡从左向右移动，然后在第二次单击时，关闭“push menu”使其淡出，类似淡出过渡，或者单击以从其自身位置向左移动

链接到

请看下面的代码，而不仅仅是代码！！因为代码是从小提琴上取下来的，所以请看一看，而不仅仅是代码！！因为代码是从小提琴上取下来的

jQuery(document).ready(function($) {
    $(document).ready(function () {
        $('.push-button').click(function () {
            $('.push-button-top').toggleClass('open');
            $('.push-button-middle-under').toggleClass('open-2');
            $('.push-button-middle').toggleClass('open-1');
            $('.push-button-bottom').toggleClass('open-3');
       });
    });


        $(document).ready(function () {
            $(".push-button").click(function () {
                $("#push-menu").slideToggle("slow");
            });
        });

    $(document).ready(function () {
        $(".push-button").click(function () {
            $('.link-item-1').toggleClass('active-1');
            $('.link-item-2').toggleClass('active-2');
            $('.link-item-3').toggleClass('active-3');
            $('.link-item-4').toggleClass('active-4');
            $('.link-item-5').toggleClass('active-5');
        });
    });

    $(document).ready(function () {
        $(".push-button").click(function () {
            $('#push-button').toggleClass('activated');
       });
    });
});