jQuery入門 | エフェクト(effect)効果 | アニメーション効果 .animate()

Tags:

.animate()メソッド

jQueryでは、.animate()メソッドを使用してユーザー定義のエフェクト効果を定義できる。
.animate()メソッドは、複数のCSSスタイルプロパティを使用して新しいエフェクト効果を作成する。

.animate()メソッドの構文は次のとおりである。

$(セレクター).animate(スタイル [,持続時間] [,イージング関数] [,コールバック関数]);
  • スタイル: 必須であり、エフェクト効果を構成するCSSスタイルプロパティを定義する。
  • 持続時間: エフェクト効果が続く時間を渡す。
  • イージング関数(easing function): エフェクト効果の時間あたりの速度を渡す。
  • コールバック関数: エフェクト効果の動作が完了した後に実行する関数を定義する。

次の例は、<div>要素を200x200pxにサイズ変更し、透明度を0.5に変更する処理を1秒間行う。完了後には、完了したことを示すテキストを表示する。

$("div").animate({
    width: "200px",
    height: "200px",
    opacity: 0.5
},
1000,
function() {
    $("#text").text("アニメーション効果の実行が完了しました。");
});

コードを実行

.animate()メソッド - 使用できるCSSプロパティ

.animate()メソッドでは、色(color)に関するプロパティを除き、ほぼすべてのCSSプロパティを使用できる。

.css()メソッドでは、ハイフン(-)でつながれたCSSプロパティ名と、camelCase形式に変換したプロパティ名の両方を使用できる。 しかし、.animate()メソッドではcamelCase形式のプロパティ名だけを使用できる。

.animate()メソッドで使用できるCSSプロパティは次のとおりである。

  • backgroundPositionX
  • backgroundPositionY
  • borderWidth
  • borderBottomWidth
  • borderLeftWidth
  • borderRightWidth
  • borderTopWidth
  • borderSpacing
  • margin
  • marginBottom
  • marginLeft
  • marginRight
  • marginTop
  • outlineWidth
  • padding
  • paddingBottom
  • paddingLeft
  • paddingRight
  • paddingTop
  • height
  • width
  • maxHeight
  • maxWidth
  • minHeight
  • minWidth
  • fontSize
  • bottom
  • left
  • right
  • top
  • letterSpacing
  • wordSpacing
  • lineHeight
  • textIndent

.animate()メソッド - 定義済みの値

.animate()メソッドでは、CSSプロパティ値として次の定義済みの値を使用できる。

  • show: 要素を表示する。
  • hide: 要素を隠す。
  • toggle: 要素の表示と非表示を交互に実行する。つまり、showとhideを交互に実行する。

次の例は、width、heightプロパティ値を定義済みの"toggle"に設定する例である。

$("button").on("click", function(){
    $("div").animate({
        width: "toggle",
        height: "toggle",
    }, 1000);
});

コードを実行

.animate()メソッド - イージング関数

.animate()メソッドは、イージング関数(easing function)を使用してエフェクト効果の時間あたりの速度を設定できる。

  • swing: 開始時と終了時はゆっくり動くが、中間では速くなる。
  • linear: 一定の速度で動く。

次の例は、swingとlinearの違いを確認できる例である。

$("#btnStart").on("click", function(){
  $(".bar").stop().animate({
    width: "400px"    // CSS widthプロパティの値を"400px"に設定する。
  }, 2000, "linear"); // イージング関数を"linear"に設定する。
});
$("#btnEnd").on("click", function(){
  $(".bar").stop().animate({
    width: "1px"      // CSS widthプロパティの値を"1px"に設定する。
  }, 2000, "swing");  // イージング関数を"swing"に設定する。
});

コードを実行