0

要素がクリックされたときに、以下のスクリプトで 3 つのアニメーションすべてを同時にアニメーション化する方法を見つけようとしています。現在、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');


        }
    });
 });

どんな助けでも大歓迎です。

4

1 に答える 1

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

        }

このデモをチェック

于 2012-05-08T05:30:54.593 に答える