質問編集履歴

1 ソースコードを```で囲いました。

loran194

loran194 score 8

2018/06/03 08:08  投稿

jquery animate での複数要素の同時処理
### 実現したいこと
現在ボタンを押した際に、メニューが表示される処理を作成しております。
### 発生している問題・エラーメッセージ
```
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,など
  • jQuery

    8984 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る