jQueryで要素の簡単なアニメーション

jQueryを使うと要素をアニメーションさせることもできます。

今回はjQueryでアニメーションを簡単に実装するいくつかの方法をご紹介します。

表示と非表示

要素の表示非表示でアニメーションさせるには以下のコードを使用します。

$("#target").show(); // 表示

$("#target").hide(); // 非表示

この関数を使うことで対象の要素はフェードと同時に少しスライドしながら表示又は非表示されます。

以下のように引数を指定することも可能です。

$("#target").show(1000); // 1秒間のアニメーションで表示

$("#target").show(1000, function() {
    // 表示後に実行
}); // 1秒間のアニメーションで非表示した後関数を実行

アニメーションの長さ、アニメーションが終了した後の処理を指定できます。

jQueryは一行ずつ実行されますが、表示非表示などを行うための関数はアニメーションをお願いしているだけなので、アニメーションが終わっていなくても次の行を実行できます。

そのため、終わってから実行してほしいことに関しては、引数で関数を渡して実行させることがあります。

終了時に実行される関数のことをコールバック関数などと呼びます。

また、表示非表示を切り替えるtoggleという関数も存在します。

$("target").toggle();

これらと同じように他にも表示非表示のアニメーションができる以下のような関数があります。

フェード：　fadeIn、fadeOut、fadeToggle、fadeTo
スライド：　slideDown、slideUp、slideToggle

fadeToは現在の透明度から引数で指定する透明度までアニメーションする関数です。

$("#target").fadeTo(
    0.5,
    1000,
    function(){ // アニメーション終了時に実行される }
); // 50%まで1秒でアニメーション

アニメーション

jQueryにはそれ以外にもCSSの値を指定することによりアニメーションさせる方法が用意されています。

$("#target").animate({
    width: "2rem",
    height: "4rem"
});

targetの幅と高さが指定の値になるまでアニメーションするコードです。これも引数としてアニメーションの長さと終了時の処理を指定できます。

widthやheightなど引数で渡すオブジェクトが持つキーの名前はcssを基準にしています。ちなみに以下のコードでアニメーションなしでcssを変更することもできます。

$("#target").css({
    backgroundColor: "red",
    color: "white"
});

どちらの場合でも単語の区切りをCSSの書き方であるハイフンから大文字に変える必要があります。

background-color -> backgroundColor
font-size -> fontSize

また、animate関数では現在の数値から相対的に変化させることも可能です。以下のコードではaction-buttonがクリックされるたびに、tagetの幅が2remずつ大きくなります。

$("#action-button").click(function(){
    $("#target").animate({
        width: "+=2rem"
    });
});

また、アニメーションを止める関数も存在します。

$("#target").stop();

これまで紹介してきた関数は戻り値として$(selector)と同じオブジェクトを返すので、複数実行したいときは以下のようにも書けます。

// targetの背景色を緑にし、targetをスライドさせながら非表示にする
$("#target").css({backgroundColor: "green"}).slideUp(1000);

こう書くことで、毎回$(selector)を書く時よりも要素を検索する処理が減るので、より高速に実行できます。これはチェーンと呼ばれる方法です。