JQuery анимации не запускаются одновременно

Question

Ive пытался выяснить, как получить все три анимации в сценарии ниже, чтобы оживить одновременно при нажатии элемента. В настоящее время выполняется один элемент, а затем второй после его завершения. Не уверен, в чем проблема, поскольку я пробовал много предлагаемых решений для подобных сообщений и не повезло.

$(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