Table of Contents
前回は jQuery で、id属性やclass属性による要素の指定方法とクリックイベントの登録について紹介しました。
今回は jQuery の強力な機能の一つであるアニメーションについて紹介します。
フェードインとフェードアウト
jQuery では様々なアニメーションを設定可能であり、自作のアニメーションも作ることができます。
まずは、最も簡単なアニメーションであるフェードインとフェードアウトについて、実際に使ったページのサンプルを紹介します。
サンプルソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryでアニメーション</title>
</head>
<style>
#target {
display: none;
width: 100px;
height: 100px;
background-color: red;
}
</style>
<body>
<div id="target">表示</div>
<button>アニメーション開始</button>
</body>
<!-- jQueryの読み込み -->
<script src="jquery-3.1.1.min.js"></script>
<script>
$(function() {
// この中に jQuery を書く
// ボタンをクリックした時の処理
$("button").click(function() {
// プロパティ display の現在の状況を取得
var displayState = $("#target").css("display");
if (displayState === "none") {
// 1秒かけてフェードイン
$("#target").fadeIn(1000);
} else {
// 1秒かけてフェードアウト
$("#target").fadeOut(1000);
}
});
});
</script>
</html>
サンプルをブラウザで実行した結果です。ボタンを押すと指定した要素がフェードイン・フェードアウトします。
サンプルの解説
今回は、まだ紹介していない新しい jQuery のメソッドが登場していますので、それを紹介します。
CSSのプロパティ値を取得・変更するjQueryのメソッド css
上記のサンプルは、アニメーションを行う対象の要素が表示状態かそうでないかを判別して、それによってフェードインとフェードアウトを切り替えています。
そのために、現在の表示状態を取得する必要があるのですが、これは CSS のプロパティである display の情報を取得するということになります。
jQuery には CSS のプロパティの状態を取得するメソッドがあり、これが css です。
var displayState = $("#target").css("display");
メソッドの引数には、取得したいプロパティの名前を渡します。
メソッド css は、戻り値として、指定したプロパティの現在地を返します。それを変数 displayState に代入することで、後の処理で使えるようにしています。
もしターゲットとなっている要素が隠れているのであれば、displayState の値は none になりますので、その場合はフェードイン、それ以外であればフェードアウトさせます。
今回は行なっていませんが、メソッド css の第二引数を設定することで、値の設定（上書き）ができます。例えば、ある要素の文字色を赤くしたいという場合は、以下のようにかけます。
$("#target").css("color", "red");
フェードアニメーションを行うメソッド fadeIn fadeOut
フェードインとフェードアウトを行うメソッドは、それぞれ fadeIn と fadeOut です。
// フェードインアニメーション
$("#target").fadeIn(ミリ秒);
// フェードアウトアニメーション
$("#target").fadeOut(ミリ秒);
引数にはアニメーションを行う時間をミリ秒単位で指定します。
1000ミリ秒 = 1秒 ですので、1000と指定すれば1秒でアニメーションが完了します。
コールバックの設定
メソッド fadeIn と fadeOut はコールバック（アニメーション完了後に行われる処理）を設定することができます。
これらのメソッドの第二引数に渡したメソッドが実行されます。
例えば、上記のサンプルのアニメーション部分を以下のように書き換えると、アニメーション完了後にログにメッセージが表示されます。
if (displayState === "none") {
// 1秒かけてフェードイン
$("#target").fadeIn(1000, function() {
console.log("フェードイン完了");
});
} else {
// 1秒かけてフェードアウト
$("#target").fadeOut(1000, function() {
console.log("フェードイン完了");
});
}
自作のアニメーションを作成
jQuery は、様々なCSSプロパティを同時に変更するアニメーションを簡単に作ることができます。
実際にフォントの大きさと、横幅、縦幅が変わるアニメーションを作ってみましょう。
自作アニメーションのサンプルソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryでアニメーション</title>
</head>
<style>
#target {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<body>
<div id="target">表示</div>
<button>アニメーション開始</button>
</body>
<!-- jQueryの読み込み -->
<script src="jquery-3.1.1.min.js"></script>
<script>
$(function() {
// この中に jQuery を書く
// ボタンをクリックした時の処理
$("button").click(function() {
// 1秒かけて自作アニメーション
$("#target").animate({
width: "200px",
height: "200px",
fontSize: "32px"
}, 1000);
});
});
</script>
</html>
ボタンを押すと、ボックスの大きさと文字サイズが徐々に大きくなるアニメーションが実行されます。
サンプルの解説
アニメーションを作るには、メソッド animate を使います。
animate の第一引数に、変更したいCSSプロパティを書いた javascript のオブジェクト（{}）を渡します。
今回は3つのプロパティ（width, height, font-size）を変更したいので、以下のようなオブジェクトを渡します。
{
width: "200px",
height: "200px",
fontSize: "32px"
}
animate の引数として渡すオブジェクト内のCSSプロパティの書き方は、通常のCSSのそれと若干異なります。具体的には、ハイフンでつながっているプロパティ名は、ハイフンをなくして二つ目以降の単語の頭文字を大文字にします。（Lower Camel Case : ローワーキャメルケース）
例えば font-size などは fontSize としなければなりません。
第二引数にはアニメーションの再生時間をミリ秒単位で設定します。
これでアニメーションの設定は完了です。