1

jQuery で作成したスクリプトを改善して、複数のアニメーションを (タイムライン シーケンスのようなもので) 連鎖させるアニメーションを実行することを検討しています。個々のアニメーションを手動で連鎖させる代わりに、各アニメーションで標準的ないくつかの要素を置き換える関数を書きたいと思います。

確かに、これを達成するためのベスト プラクティスを知るための JavaScript の知識はありません。そうは言っても、いくつかのポインタ/例は素晴らしいでしょう。

これが私が持っているものです：

function itemsFirstAnim() {

    // Define each target div
    var one = $(".one");
    var two = $(".two");
    var three = $(".three");
    var four = $(".four");
    var five = $(".five");
    var six = $(".six");
    var seven = $(".seven");
    var eight = $(".eight");
    var nine = $(".nine");
    var ten = $(".ten");
    var eleven = $(".eleven");
    var twelve = $(".twelve");

    // Show a block (opacity 1), give the overlay a position, show and animate it
    twelve.css("opacity", 1).children(".overlay").show().animate({ right: "100%" }, 750, function() {
        // cover the block with the overlay when the animation is done
        twelve.children('.overlay').css({ right: 0 });

        eleven.css("opacity", 1).children(".overlay").show().animate({ bottom: "100%" }, 750, function() {      
            eleven.children('.overlay').css({ bottom: 0 });

            seven.css("opacity", 1).children(".overlay").show().animate({ right: "100%" }, 750, function() {
                seven.children(".overlay").css({ right: 0 });

                and so on....
        });         
        });

    });
}

理想的には、最初のセレクター (つまり) とアニメーションの方向 (つまり) を置き換えるtargetとの引数が必要です。andはそれぞれ異なるため、関数を 12 回ネストしない限り、関数を記述してその内部で呼び出すことはできません。directiontwelveright: "100%"targetdirection

最後に、これらの 12 個すべてが適用されたときに、この関数 (またはおそらくプラグイン?) の実行を停止したいと思います。

残念ながら、アニメーションの順序は連続していません (例に示すように。ただし、アニメーション化する番号の順序は知っています)。

これが私が持っているものの例です: http://codepen.io/anon/full/Dxzpj

誰かが洞察を持っているなら、それは大歓迎です。ありがとう！

4

2 に答える 2

0

これは特に美しいというわけではありませんが、カスタム キューを使用してアニメーションの順序を自由にカスタマイズできます。queueおよび関数を参照してくださいdequeue。

簡単な例は次のようになります。

$(function () {
  // Use the body to track the animation queue; you can use whatever
  // element you want, though, since we're using a custom queue name
  var $body = $(document.body);

  // Helper functions to cut down on the noise
  var continue_queue = function () {
    $body.dequeue("my-fx");
  };
  var add_to_queue = function (cb) {
    $body.queue("my-fx", cb);
  };

  // Define your queue.  Be sure to use continue_queue as the callback
  add_to_queue(function () {
    $('#one').animate({ height: '8em' }, 750, continue_queue);
  });
  add_to_queue(function () {
    $('#two').animate({ width: '8em' }, 750, continue_queue);
  });

  // Need to call this once to start the sequence
  continue_queue();
});

これにより、要素にアタッチされた別のキューを使用して、アニメーション全体の進行状況が追跡されます<body>。アニメーションの各部分が終了するcontinue_queue()と、次の部分を実行する必要があることを示すために呼び出します。

このアプローチを使用して、個別の関数、ループなどで断片的なアニメーションを作成できます。実際には、アニメーションを起動するまで実行を開始しません。

これをライブで見たり、jsfiddleでいじったりできます。

于 2013-01-15T21:11:55.563 に答える
0

すべての要素に同じ設定を適用している場合、単純な再帰が大いに役立ちます。

  var $els = $('#one, #two, #three'); // collect all your elements in an array

  (function recursive(el) {
    el.animate({height: '100px'}, 800, function() {
          if (el.next()) recursive(el.next()); // if there are more, run the function again
    });
  })($els.eq(0)); //start with the first one

実施例

于 2013-01-15T21:13:36.607 に答える