Lesson 3

エフェクト

Lesson 3 Chapter 1
表示/非表示（show/hide）

Lesson2では、jQueryの基礎中の基礎である「セレクタ」について学んできました。
さて、Lesson3では、jQueryの1つの便利機能である「エフェクト」について学んでいきましょう。

エフェクトとは

jQueyでは、「エフェクト」という機能があります。「エフェクト」を用いることで、Webページ内の指定の要素に動きを付けることができます。
いわゆる「アニメーションのような動き」を付けることができる、これがjQueryの「エフェクト」です。

通常のJavaScriptにおいても、アニメーションの機能は存在し、CSSと組み合わせることで、画面内に動きのある機能を実装することは可能ですが、欠点として「実装の内容がより複雑になりがち」といった点が挙げられます。
しかし、jQueryの「エフェクト」は上記に比べ、はるかにシンプルな記述で簡潔に実装することが可能です。
最近のモダンなWebページでは、コンテンツに動きを持たせるような見せ方も人気のUIの一つであるため、このレッスンにて、しっかりと「エフェクト」の基本について学んでいきましょう。

それでは、まず初めに、一番基本のエフェクトである「要素の表示/非表示」の方法について、説明を行います。

要素の表示（show）

jQueryにおいて、任意の要素を表示するにはshow()というアクションを利用します。
以下が文法です。

jQuery
$('要素名').show();

それでは、実際の動きについて見ていきましょう。以下に、show()を利用したサンプルコードを表示します。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div>divの要素</div>
  </body>
</html>
<style>
  div {
    display:none;
    width:300px;
    height:300px;
    text-align:center;
    line-height:300px;
    background-color: aquamarine;
    font-size: 26px;
  }
</style>
<script>
    $("div").show();
</script>

サンプルコードの内容を簡単に説明すると、初期状態の<div>要素に対し、display:none;により非表示となるように設定されており、それを後から$("div").show();によって表示状態へと変更する、といった実装を行なっています。

以下に実行結果を表示します。

show.png sample.htmlの実行結果

この後にも説明しますが、上記の場合、<div>要素が瞬時に表示される挙動となります。
そのため、この時のshow()は、<div>要素に対し、display: block;を指定することと、同じ挙動になります。

ただ、「エフェクト」として活用するには、「要素が徐々に表示されていく」ような、より動きのあるスタイルをあてたいと感じると思います。
そのため、show()のもう一つの使い方について、以下にて、さらに説明を行います。

要素をアニメーションで表示（show）

いま申し上げた、アニメーションのような動きのある見え方を実装するには、show()の括弧内に追加で引数を入れることで実現することができます。
以下のように、引数には、非表示の状態から表示完了までにかかる時間を設定することが可能です。

jQuery
$('要素名').show('時間');

それでは、試しに、非表示の状態から1秒後に表示が完了するような処理を実装し、実際の動きを確認していきましょう。以下は、さきほどのshow()を利用したサンプルコードを一部変更したコードです。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div>divの要素</div>
  </body>
</html>
<style>
  div {
    display:none;
    width:300px;
    height:300px;
    text-align:center;
    line-height:300px;
    background-color: aquamarine;
    font-size: 26px;
  }
</style>
<script>
    $("div").show(1000);
</script>

変更箇所は、show()の括弧内に、「1000」という数値を追加したのみです。
数値はミリ秒単位でセットする必要があるため、「1秒」とするために、「1000ミリ秒」の「1000」をセットしています。

以下にサンプルコードの実行結果を表示します。

sample.htmlの実行結果

このように、画面にアクセスしてから1秒後に<div>要素の表示が完了することを確認することができました。
show()は色々な場面で役に立つ基本的なアクションですので、ここでしっかりと使い方を覚えておきましょう。

要素の非表示（hide）

jQueryにおいて、任意の要素を非表示するにはhide()というアクションを利用します。
以下が文法です。

jQuery
$('要素名').hide();

それでは、実際の動きについて見ていきましょう。以下に、hide()を利用したサンプルコードを表示します。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div>divの要素</div>
  </body>
</html>
<style>
  div {
    display:block;
    width:300px;
    height:300px;
    text-align:center;
    line-height:300px;
    background-color: aquamarine;
    font-size: 26px;
  }
</style>
<script>
    $("div").hide();
</script>

上記のサンプルコードでは、初期状態の<div>要素に対し、display:block;が設定されています。ただ、$("div").hide();も指定されているため、非表示へと状態が変更されます。

実行すると、以下のように<div>要素が表示されず、真っ白な状態となります。

hide.png sample.htmlの実行結果

要素をアニメーションで非表示（hide）

show()と同様に、hide()についても、括弧内に追加で引数を入れることで、表示の状態から非表示へと徐々に移り変わるような処理を実装することが可能です。

jQuery
$('要素名').hide('時間');

それでは、実際の動きを確認していきましょう。表示の状態から1秒後に非表示となるような処理にサンプルコードを一部変更しました。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div>divの要素</div>
  </body>
</html>
<style>
  div {
    display:block;
    width:300px;
    height:300px;
    text-align:center;
    line-height:300px;
    background-color: aquamarine;
    font-size: 26px;
  }
</style>
<script>
    $("div").hide(1000);
</script>

以下にサンプルコードの実行結果を表示します。

sample.htmlの実行結果

このように、画面にアクセスしてから1秒後に<div>要素が消えることを確認することができました。
hide()もshow()と同様に、非常に便利かつ重要な機能ですので、しっかりと使い方をマスターしましょう。

Lesson 3 Chapter 2
フェードイン/フェードアウト（fadeIn/fadeOut）

チャプター1では、表示のshow()アクション、非表示のhide()アクションについて学びました。
このチャプターでは、要素をフェードインするfadeIn()アクション、フェードアウトするfadeOut()アクションについての説明を行います。

要素のフェードイン（fadeIn）

jQueryにおいて、任意の要素をフェードインするには、fadeIn()というアクションを利用します。
以下が文法です。

jQuery
$('要素名').fadeIn();

それでは、実際の動きについて見ていきましょう。以下に、fadeIn()を利用したサンプルコードを表示します。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div>divの要素</div>
  </body>
</html>
<style>
  div {
    display:none;
    width:300px;
    height:300px;
    text-align:center;
    line-height:300px;
    background-color: aquamarine;
    font-size: 26px;
  }
</style>
<script>
    $("div").fadeIn();
</script>

上記のサンプルコードでは、初期状態で非表示となっている<div>要素に対し、$("div").fadeIn();が設定されているため、フェードインする状態を確認することができます。

以下にサンプルコードの実行結果を表示します。

sample.htmlの実行結果

このように、何もない真っ白な状態から要素全体が浮かび上がってくるように表示される、これがfadeIn()アクションの挙動です。
裏側の処理を簡単に説明すると、fadeIn()アクション実行時には、<div>要素に対して設定されているdisplay:none;がdisplay:block;へと変更され、同時にCSSプロパティであるopacity（不透明度）の値が0%へ変更されます。
その後、不透明度が0%から100%まで変更されることで、フェードインするような動きを実現しています。

フェードインの時間を設定する

チャプター1にて、説明しましたshow()アクション、hide()アクションと同様に、fadeIn()アクションついても、括弧内に引数としてフェードインにかかる時間を設定することが可能です。

jQuery
$('要素名').fadeIn('時間');

以下は、3秒かけてフェードインする際のサンプルコードです。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div>divの要素</div>
  </body>
</html>
<style>
  div {
    display:none;
    width:300px;
    height:300px;
    text-align:center;
    line-height:300px;
    background-color: aquamarine;
    font-size: 26px;
  }
</style>
<script>
    $("div").fadeIn(3000);
</script>

以下にサンプルコードの実行結果を表示します。

sample.htmlの実行結果

このように、3秒かけて何もない真っ白な状態から要素全体が浮かび上がってくるように表示されることを確認することができました。

要素のフェードアウト（fadeOut）

反対に、任意の要素をフェードアウトするには、fadeOut()というアクションを利用します。
以下が文法です。

jQuery
$('要素名').fadeOut();

それでは、実際の動きについて見ていきましょう。以下に、fadeOut()を利用したサンプルコードを表示します。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div>divの要素</div>
  </body>
</html>
<style>
  div {
    display:block;
    width:300px;
    height:300px;
    text-align:center;
    line-height:300px;
    background-color: aquamarine;
    font-size: 26px;
  }
</style>
<script>
    $("div").fadeOut();
</script>

上記のサンプルコードを実行すると、display:block;が設定されている<div>要素に対し、$("div").fadeOut();が実行されるため、フェードアウトする状態を確認することができます。

以下に実行結果を表示します。

sample.htmlの実行結果

このように、簡単にフェードアウトを実現することができました。

フェードアウトの時間を設定する

fadeOut()アクションに対しても、フェードアウトにかかる時間を設定することが可能です。

jQuery
$('要素名').fadeIn('時間');

以下は、3秒かけてフェードアウトする際のサンプルコードです。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div>divの要素</div>
  </body>
</html>
<style>
  div {
    display:block;
    width:300px;
    height:300px;
    text-align:center;
    line-height:300px;
    background-color: aquamarine;
    font-size: 26px;
  }
</style>
<script>
    $("div").fadeOut(3000);
</script>

以下にサンプルコードの実行結果を表示します。

sample.htmlの実行結果

このように、3秒かけて要素全体が完全に消えていくような挙動を確認することができました。

要素のフェードイン/フェードアウトは、実際のWebサイト上でもよく使われがちなアニメーションです。実装も簡単で非常に便利な機能ですので、しっかりと使い方を身につけておきましょう。

Lesson 3 Chapter 3
その他のエフェクト

チャプター1、チャプター2では、代表的なエフェクトである「表示/非表示（show/hide）」や、「フェードイン/フェードアウト（fadeIn/fadeOut）」について学んできました。
このチャプターでは、上記以外にも、便利かつ、使い所も多いエフェクトをいくつかピックアップし、紹介します。

要素のスライドダウン（slideDown）

slideDown()は、要素を表示する際のエフェクトの一種です。その名前の通り、上から下へスライドしながら降りてくるように要素が表示されるような挙動となります。
以下が文法です。

jQuery
$('要素名').slideDown();

それでは、以下のサンプルコードを例に、実際の挙動について確認してみましょう。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div>divの要素</div>
  </body>
</html>
<style>
  div {
    display:none;
    width:300px;
    height:300px;
    text-align:center;
    line-height:300px;
    background-color: aquamarine;
    font-size: 26px;
  }
</style>
<script>
    $("div").slideDown();
</script>

以下に実行結果を表示します。

sample.htmlの実行結果

使い所としては、例えば、「エラー内容を表示」する際など、画面の上部からスライドして降りてくるような表現が似合うものに対し、役立てることができるでしょう。

また、slideDown()アクションに関しても、スライド完了までにかかる時間を設定することが可能です。挙動については、これまでに説明しましたアクションと同じようなイメージです。

jQuery
$('要素名').slideDown('時間');

要素のスライドアップ（slideUp）

slideUp()は、表示中の要素を下から上へ上がっていきながら消えていくようなアニメーションを実装することができます。
以下が文法です。

jQuery
$('要素名').slideUp();

では、以下のサンプルコードを例に、実際の挙動について確認してみましょう。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div>divの要素</div>
  </body>
</html>
<style>
  div {
    display:block;
    width:300px;
    height:300px;
    text-align:center;
    line-height:300px;
    background-color: aquamarine;
    font-size: 26px;
  }
</style>
<script>
    $("div").slideUp();
</script>

以下に実行結果を表示します。

sample.htmlの実行結果

また、slideUp()アクションに関しても、もちろん、スライドアップ完了までにかかる時間を設定することが可能です。挙動については、これまでに説明しましたアクションと同じようなイメージです。以下が文法です。

jQuery
$('要素名').slideDown('時間');

animate()

animate()は、名前の通り、要素をアニメーションするエフェクトです。これまでに説明したアクションよりも、比較的柔軟に設定内容をカスタマイズすることが可能です。
以下が文法です。

jQuery
$('要素名').animate(①プロパティ, ②時間, ③コールバック関数);

①プロパティ
アニメーションしたい内容を、CSSのプロパティとして記述します。

②時間
アニメーション開始から終了までにかかる時間を指定します。

③コールバック関数
アニメーション終了後に行いたい処理がある場合は、ここに記述します。

では、以下に、今回のアニメーション用のサンプルコードを記載します。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div>divの要素</div>
    <p>pの要素</p>
  </body>
</html>
<style>
  div {
    display:block;
    width:300px;
    height:300px;
    text-align:center;
    line-height:300px;
    background-color: aquamarine;
    font-size: 26px;
  }
</style>
<script>
    $("div").animate({
      opacity: 0.25,
    }, 3000, function() {
      $("p").text("アニメーションが完了しました。");
    });
</script>

サンプルコードの内容を簡単に説明します。<div>要素に対し、3秒かけて、CSSプロパティであるopacity（要素の不透明度）の値を25%にするようにアニメーションを行う、という実装を行っています。つまり、徐々に、<div>要素が薄くなっていくような挙動となります。
また、コールバック関数も実装しており、アニメーション終了後には、<p>要素のテキストを「アニメーションが完了しました。」へと変更する処理を記述しています。

実際の実行結果を、以下に表示します。

sample.htmlの実行結果

このように、自由度の高いアニメーションを実装することができました。
animate()アクションは、その柔軟性の高さから、より複雑なアニメーションを実現することができるのがメリットの1つと言えるでしょう。

このレッスンでは、jQueryの様々な「エフェクト」について紹介しました。どれも実際のWebページ制作の際に非常に役立ちますので、しっかりと使い方を理解し、自由に使いこなせるようになりましょう。