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

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

１回目はアニメーションの説明から、animateメソッドの解説まででした。

今回はanimateメソッドのサンプルを紹介したいと思います。
まずは基本的なものから・・・。

●animateメソッドのサンプル（基本）

1.大小を変える

duration: 500ms 1000ms 1500ms
easing: swing linear

ここでは文字の大小を変化させているの「font-size」のプロパティを指定しました。
単純に変化させるのであればパーセントで指定する方が簡単です。
細かく指定する場合は「px」や「em」で指定します。
また、図やオブジェクトを変化させる場合は「height」や「width」で調整できます。

  $("#animate1-Target").animate({fontSize: "150%"});

あいうえお

2.左右に動かす

duration: 500ms 1000ms 1500ms
easing: swing linear

div属性で定義したオブジェクトを動かすには「margin-left」のプロパティを使います。
右へ動かすには「+」、左へ動かすには「-」で指定します。
なお、上下に動かすには「margin-top」を使用します。

  $("#animate1-Target").animate({marginLeft: "+=75px"});

かきくけこ

3.濃淡を変える

duration: 500ms 1000ms 1500ms
easing: swing linear

「opacity」によって濃淡を変えます。
opacityは「0.0（淡）～1.0（濃）」の範囲で指定可能です。
通常で見える状態は「1.0」。対して、一番淡い（何も見えない）状態は「0.0」です。
また、opacityに「"toggle"」と指定することで、下から徐々に消えるようになります。

  $("#animate1-Target").animate({opacity: "0.5"});

さしすせそ

4.エフェクトが完了する時間を変える

完了時間を操作するには「duration」の引数を使います。
描画効果は他の描画サンプルにて確認できますので、
durationのラジオボタンを変えながら変化を感じてください。

  $("#animate4-Target").animate({fontSize: "150%"},1500);

5.エフェクトの動きを変える

エフェクトの動きを操作するには「easing」の引数を使います。
標準では「swing」と「linear」が用意されています。
描画効果は他の描画サンプルにて確認できますので、
easingのラジオボタンを変えながら変化を感じてください。

  $("#animate5-Target").animate({fontSize: "150%"},1500,"swing");

6.エフェクト完了後にアラートを出す

duration: 500ms 1000ms 1500ms
easing: swing linear

エフェクト完了時にアラートを出すには、「complete」の引数を使います。
この引数には完了時に動かしたい任意の関数（function() { }）が指定できます。
今回のサンプルでは、
　・アラートを出すための「alert関数」の実行
　・アラート確認後、移動したオブジェクトを元に戻す処理
を行っています。

  $("#animate6-Target").animate(
    // properties
    {marginLeft: "+=100px", marginTop: "+=100px"},
    // duration
    1000,
    // easing
    "swing",
    // complete
    function() {
      alert("Complete!!");
      $("#animate6-Target").animate({marginLeft: "-=100px", marginTop: "-=100px"},0);
    }
  );

いかがでしたか？

次回は応用として、
もう少しだけ難しいアニメーションに挑戦したいと思います。

それでは、また。

• Tweet
• Share
• Share
• Share
• Share