jQueryで画像のフェードインとスライドダウンを同時に行う方法

インタラクティブなサイトだとユーザーが何か操作すると文章や画像などがアニメーションしながら表示される演出をしているところがあります。

そのような演出をするにはjQueryで要素に対してアニメーション関数を実行するとフェードインやスライドダウンの効果をつけることができます。

ただ複数の効果をつけようとした場合は少し工夫が必要です。ここでは画像などの要素の表示時にフェードインとスライドダウンの両方のアニメーション効果をつける方法について解説します。

jQueryでアニメーション効果をつける方法

jQueryで要素をアニメーションさせながら表示するには非表示(display:none)の要素に対してアニメーションさせる関数を呼び出します。

例えばボタンを押したら画像がフェードインして表示する場合を考えてみます。必要なのが次のような画像要素と画像を表示するためのボタン要素です。

<div id="image" style="display: none;">
<img class="alignnone size-medium wp-image-226" src="./wordpress.png" />
</div>
<button id="show_btn">画像を表示</button>

画像の含まれているdiv要素は「display:none」で非表示にしてあります。

そしてボタンを押したらフェードインで表示するようなスクリプトは次の通りです。

jQuery(function(){
  jQuery("#show_btn").on("click", function(){
    jQuery("#image").fadeIn(500);
  });
});

fadeIn関数は要素をフェードイン表示させる関数で次のような構文を持ちます。

fadeIn([ミリ秒], [コールバック関数])

第一引数でフェードインにかかる時間(ミリ秒)を指定し、ここでは省略していますが第二引数でアニメーション終了時に実行される関数を渡します。

上のスクリプトを実行するとボタンを押したときに画像がフェードインして表示されます。実際にどのように表示されるかは下のボタンを押してみてください。

画像を表示非表示

また要素を上から下にスライドして表示するにはslideDownという関数を使います。構文は次の通りです。

slideDown([ミリ秒], [コールバック関数])

fadeInと同じくスライドにかかる時間(ミリ秒)と終了時に実行する関数を渡すだけです。

実際にスライドダウンがどのように動くかは下のボタンを押して確かめてください。

画像を表示非表示

２つの効果を同時につけた場合の問題

フェードインとスライドダウンの効果を同時につけようとすると問題があります。それは同時に２つの効果をつけられないということです。

例えば２つの効果をつけようと次のようなスクリプトを書いたとします。

jQuery(function(){
  jQuery("#btn").on("click", function(){
    jQuery("#image").fadeIn(500).slideDown(500);
  });
});

このように書けばフェードインしながらスライドダウンしてくるのではと期待してしまいますが、実際はそうはなりません。

どのように動作するかは下のボタンを押してみてください。

画像を表示非表示

スライドダウンの効果しかついていないと思います。

これはfadeInを実行したすぐ後にslideDownを実行しているので効果が上書きされるからです。この方法では同時に２つの効果をつけることはできません。

animate関数を使えばいい

そこで解決策としてfadeIn関数をanimate関数に置き換えます。

animate関数は独自のアニメーションを作るための関数でCSSプロパティを時間に沿って変化させることができ、次のような構文を持ちます。

animate([CSSプロパティ], [オプション])

例えば３秒かけて要素の幅を200px、高さを100pxにするアニメーションをかけたいなら次のスクリプトを書きます。

$("div.box").animate({
  width: "200px",
  height: "100px"
}, {duration: 3000});

１つめの引数には「CSSプロパティ名: 値」のような形式でプロパティと値を複数指定でき、２つめの引数でアニメーション時間などのオプションを指定します。

この時要素にアニメ効果を複数つけたい場合は２つめのオプションで「queue」に対してfalseを指定します。

これを使って要素にフェードイン効果とスライドダウン効果を同時につけます。

まず今まで通り次のように表示する要素とボタンを次のように定義します。

<div id="image" style="display: none; opacity: 0;">
<img src="./wordpress.png" />
</div>
<button id="show_btn" class="_btn">画像を表示</button>

表示する要素に対して「opacity: 0」で透過度を0にしていることに注意してください。

そして次のようなスクリプトを書きます。

jQuery("#show_btn").on("click", function(){
  jQuery("#image")
    .slideDown(500).animate(
      { opacity: 1 },
      { queue: false, duration: 500 }
    );
});

スライドダウンすると同時にanimate関数内で500ミリ秒かけてopacityプロパティを1(完全不透明)にすることでフェードイン効果をつけています。

実際にどのように表示されるかは下のボタンを押してください。

画像を表示非表示

少しわかりにくいかもしれませんが、要素が透明から不透明になりながらスライドダウンして表示されているのが分かると思います。

まとめ

以上、フェードイン＆スライドダウンの２つのアニメ効果をつける方法でした。

これ以外の効果をつけたい場合もこの方法が使えます。