jquery動畫不能同時運行

Question

我一直在試圖弄清楚如何讓下面的腳本中的所有三個動畫同時在單擊元素時進行動畫。目前一個元素運行，然後在完成後運行另一個元素。不知道是什麼問題，因爲我已經嘗試了許多類似帖子的建議解決方案，並沒有運氣。

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