Jqueryアニメーションが同時に実行されない

Question

要素がクリックされたときに、以下のスクリプトの3つのアニメーションをすべて同時にアニメーション化する方法を解明しようとしていました。現在、1つの要素が実行され、その後にもう1つの要素が完了します。私は同様の投稿に多くの提案された解決策を試してみたが、運がなかったので、何が問題なのかよく分からない。

$(document).ready(function() { 

    var $dropDownWrapper = $('#dropdown-wrapper'); 


    $("#clickme").click(function() { 

     var wrapperHeight = $dropDownWrapper.css("height"); 


     if(wrapperHeight == '3px') { 

      $('#clickme').animate({"margin-top": "200px"}, 400, 'swing'); 

      $('#arrow').css('backgroundPosition', '0 3px'); 

      $dropDownWrapper.animate({"height": "200px"}, 400); 





     } 

     else { 

      $('#clickme').animate({"margin-top": "3px"}, 400, 'swing'); 

      $dropDownWrapper.animate({"height": "3px"}, 400, 'swing'); 

      $('#arrow').css('backgroundPosition', '0 -10px'); 


     } 
    }); 
}); 

ご協力いただきまして誠にありがとうございます。

Answer 1

 if(wrapperHeight == '3px') { 

      $('#clickme').animate({ 
       "margin-top": "200px" 
      },{ duration: 400, queue: false, easing: "swing"}); 

      $dropDownWrapper.animate({ 
       "height": "200px" 
      },{ duration: 400, queue: false, easing: "swing" }); 

      $('#arrow').css('backgroundPosition', '0 3px'); 

     } else { 

      $('#clickme').animate({ 
       "margin-top": "3px" 
      }, { duration: 400, queue: false, easing: "swing" }); 

      $dropDownWrapper.animate({ 
      "height": "3px" 
      }, { duration: 400, queue: false, easing: "swing" }); 

      $('#arrow').css('backgroundPosition', '0 -10px'); 

     } 

Check this DEMO