jquery animate での複数要素の同時処理

Question

実現したいこと

現在ボタンを押した際に、メニューが表示される処理を作成しております。

発生している問題・エラーメッセージ

Jqueryのアニメーション処理が、同時ではなく、処理が終わり次第処理が実行される状態で、これを解決する方法を調べはしたのですが、うまく同時処理することができなかったため質問させていただきました。```

### 該当のソースコード

```jQuery

$(function(){

var menu = $('#slide_menu'), // スライドインするメニューを指定
menuBtn = $('#button'), // メニューボタンを指定
body = $(document.body),
menuWidth = menu.outerWidth();

// メニューボタンをクリックした時の動き
menuBtn.on('click', function(){
body.toggleClass('open');
    if(body.hasClass('open')){
		            menu.animate({'left' : 0 }, 300);
        body.animate({'left' : menuWidth }, 300);     
	  $('body').animate({'width': '80%'}, 300); 

    } else {
        menu.animate({'left' : -menuWidth }, 300);
        body.animate({'left' : 0 }, 300);
$('body').animate({'width': '100%'}, 300); 

  
    }             
});

});

### 試したこと

.onや、                    queue: false,など

Comments

[m.ts10806]

ソースコードがきちんと```で囲われていません。質問編集画面ではリアルタイムプレビューが表示されているのできちんとなっているか見ながら調整してください。

[loran194]

ありがとうございます。早速修正いたしました。

[m.ts10806]

インデントはきちんとつけてください。開始と閉じが分かりにくくなることにより問題個所の発見が難しくなります。

[m.ts10806]

フォーマット機能がある高機能エディタやコード整形サービス（http://tools.m-bsys.com/development_tooles/jsbeautifier.php など）も活用してください。

[m.ts10806]

起きた現象を具体的に記載してください。　＞うまく同時処理することができなかった 　　https://teratail.com/help/question-tips#questionTips3-4