エフェクトの入門

はじめに

jQuery ドキュメントへようこそ！この実験では、エフェクトについて紹介します。

jQuery を使えば、ページに簡単なエフェクトを追加することが非常に簡単になります。エフェクトは、組み込みの設定を使用することもできますし、カスタマイズされた期間を指定することもできます。また、任意の CSS プロパティのカスタム アニメーションも作成できます。

コンテンツの表示と非表示

VM には既に index.html が用意されています。

jQuery を使えば、.show() または .hide() を使ってコンテンツを即座に表示または非表示にできます。

// すべての段落を即座に非表示にする
$("p").hide();

// 非表示スタイル クラスを持つすべての div を即座に表示する
$("div.hidden").show();

jQuery が要素を非表示にするとき、その CSS の display プロパティを none に設定します。これは、コンテンツの幅と高さがゼロになることを意味します。コンテンツが単に透明になり、ページ上に空の領域が残るということではありません。

jQuery はまた、アニメーション エフェクトを使ってコンテンツを表示または非表示にすることもできます。.show() と .hide() にアニメーションを使用させる方法はいくつかあります。一つは、'slow'、'normal'、または 'fast' の引数を渡すことです。

// すべての段落をゆっくりと非表示にする
$("p").hide("slow");

// 非表示スタイル クラスを持つすべての div を迅速に表示する
$("div.hidden").show("fast");

アニメーション エフェクトの期間をより直接的に制御したい場合は、ミリ秒単位の希望する期間を .show() と .hide() に渡すことができます。

// 半秒間かけてすべての段落を非表示にする
$("p").hide(2000);

// 1.25 秒間かけて非表示スタイル クラスを持つすべての div を表示する
$("div.hidden").show(1250);

ほとんどの開発者は、期間をより正確に制御するためにミリ秒数を渡します。

右下隅の「Go Live」をクリックして、ポート 8080 でウェブ サービスを実行してください。その後、Web 8080 タブを更新してウェブ ページをプレビューできます。

現在の表示状態に基づく表示変更

jQuery を使えば、コンテンツの現在の表示状態に基づいてその表示を変更することもできます。.toggle() を使うと、現在非表示のコンテンツを表示し、現在表示されているコンテンツを非表示にします。.toggle() には、上記のエフェクト メソッドのいずれかに渡すのと同じ引数を渡すことができます。

// すべての段落の表示を即座に切り替える
$("p").toggle();

// 1.8 秒間かけてすべての div の表示を切り替える
$("div").toggle(1800);

.toggle() は、.show() や .hide() と同じように、スライドとフェード エフェクトの組み合わせを使用します。

Web 8080 タブを更新してウェブ ページをプレビューできます。

アニメーション終了後の処理

jQuery エフェクトを実装する際の一般的な誤りは、メソッドチェーン内の次のメソッドの実行がアニメーションが完了するまで待つと仮定することです。

$("div.hidden").fadeIn(1500).addClass("lookAtMe");

上記の .fadeIn() はアニメーションを開始するだけであることに注意することが重要です。開始されると、アニメーションは JavaScript の setInterval() ループで CSS プロパティを急速に変更することによって実装されます。.fadeIn() を呼び出すと、アニメーションループが開始され、その後 jQuery オブジェクトが返され、.addClass() に渡されます。そして、アニメーションループが始まったばかりの段階で lookAtMe スタイル クラスが追加されます。

アニメーションが完了した後に処理を延期するには、アニメーションコールバック関数を使用する必要があります。アニメーションコールバックを、上記で説明したアニメーションメソッドのいずれかに渡される 2 番目の引数として指定することができます。上記のコード スニペットでは、コールバックを次のように実装できます。

// すべての非表示の段落をフェードインさせ、その後にスタイル クラスを追加する（アニメーションコールバックを使った正しい方法）
$("div.hidden").fadeIn(1500, function () {
  // this = アニメーションが完了した直後の DOM 要素
  $(this).addClass("lookAtMe");
});

アニメーション対象の DOM 要素を参照するために this キーワードを使用できることに注意してください。また、コールバックは jQuery オブジェクト内の各要素に対して呼び出されることにも注意してください。これは、セレクタが要素を返さない場合、アニメーションコールバックが決して実行されないことを意味します！この問題を解決するには、選択が要素を返したかどうかをテストします。返さなかった場合は、コールバックを直ちに実行することができます。

// アニメーション対象の要素がなかった場合でもコールバックを実行する
var someElement = $("#nonexistent");

var cb = function () {
  console.log("done!");
};

if (someElement.length) {
  someElement.fadeIn(300, cb);
} else {
  cb();
}

Web 8080 タブを更新してウェブ ページをプレビューできます。

まとめ

おめでとうございます！エフェクトの入門実験を完了しました。jQuery API について詳しく学ぶには、公式の jQuery ドキュメントをご覧ください。