jquery - 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');

        }

检查此演示