jQuery の fadeIn を使用したアニメーションとコールバック(サンプル付き)
Y さんから質問がありました。
「ふわっと画像が出てくるようにしたい。ふわっと。」
jQuery の fadeIn を使用すると簡単にできると思います。
.fadeIn() | jQuery API Documentation
ポイントは 2 つです。
- ふわっとしたい対象の要素のスタイルに
display: none
を指定し非表示にする - ふわっとしたい対象の要素をjQuery でセレクトして、
fadeIn
メソッドを呼び出す
サンプル
// JavaScript のみ抜粋
$(() => {
// fadeIn の引数はミリ秒。この時間をかけてふわっとする。
$("#red").fadeIn(1000);
$("#blue").fadeIn(1000);
$("#yellow").fadeIn(1000);
});
上の図にマウスをホバーし、rerun することでもう一度動作します。
「ふわふわふわって、順番に出てきてほしい。」
2 つ方法があります。
- コールバック関数を指定して 1 つの表示完了を待ってから、次の要素を表示する方法
- 表示完了を待たずに、次の要素を表示する方法
まずは 1。ポイントは fadeIn の第 2 引数に指定するコールバック関数内で次のふわっとしたい要素の処理を呼び出すことです。ちなみに、「コールバック関数」とは特定の処理の終了を待って呼び出される関数のことです。
サンプル
// JavaScript のみ抜粋
$(() => {
$("#red").fadeIn(1000, () => {
// #red のコールバック関数内の処理
$("#blue").fadeIn(1000, () => {
// #blue のコールバック関数内の処理
$("#yellow").fadeIn(1000);
});
});
});
上の図にマウスをホバーし、rerun することでもう一度動作します。
次に2です。ポイントは delay でふわっの開始を遅らせることです。
.delay() | jQuery API Documentation
サンプル
// JavaScript のみ抜粋
$(() => {
$("#red").fadeIn(1000);
// delay の引数はミリ秒。この時間分ふわっ(fadeIn)を遅らせる。
$("#blue").delay(200).fadeIn(1000);
$("#yellow").delay(400).fadeIn(1000);
});
上の図にマウスをホバーし、rerun することでもう一度動作します。