（jQueryの学習）エフェクト：アニメーション（第三回）

「アニメーション」の３回目です。

今回もanimateメソッドのサンプルの紹介ですが、
前回よりももう少し難易度を上げたいと思います。

●animateメソッドのサンプル（応用）

7.複数のエフェクトを直列に動かす

直列に動かすためには、
最初のエフェクトが『終わったら』次を実行するようにします。
今回は「complete」の引数を利用して実現しています。

  $("#animate7-Target1").animate(
    {marginLeft: "+=100"},
    1000,
    "swing",
    function() {
      $("#animate7-Target2").animate(
        {marginLeft: "+=100"},
        1000,
        "linear"
      );
    }
  );

swing

linear

8.複数のエフェクトを並列に動かす

並列に動かすためには、動かしたいエフェクトを続けて書くだけです。

  $("#animate8-Target1").animate({marginLeft: "+=100"}, 1000, "swing");
  $("#animate8-Target2").animate({marginLeft: "+=100"}, 1000, "linear");

swing

linear

9.エフェクトをループさせる

ループさせるためには、
jQueryではなくJavaScriptの「setTimeout（mozillaのAPIリファレンスはこちら）」を使います。
今回の例では『3秒間に左から右に丸いオブジェクトを延々と移動』させてます。

$(function() {
  // (1)実行ボタン押下で「setTimeout」を起動（JavaScriptの関数を実行）
  $("#animate9-Trigger input[type=button]").click(function(){
    setTimeout("loopAnimate()");
  });
});
function loopAnimate() {
  // (2)animateでオブジェクトを移動（左⇒右・・・移動が完了したら左へ戻す）
  $("#animate9-Target").animate({marginLeft: "350px"}, 3000)
                        .animate({marginLeft: "-100px"}, 0)
  // (3)もう一度「setTimeout」を起動（後は(2)～(3)の繰り返し）
  setTimeout("loopAnimate()", 3000);
}

loop

いかがでしたか？

調べてみると、
もっと複雑なアニメーションもできるようです。
近いうちに挑戦したいですね。

それでは、また。

• Tweet
• Share
• Share
• Share
• Share