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 的

Jquery动画不会同时运行

1 个答案: