Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

あらかじめ用意されたアニメーションを実行するには?(show/hide/fadeIn/fadeOut/slideUp/slideDown)

2015年7月30日

jQueryが提供する基本的なアニメーション機能を活用して、要素を表示/非表示、フェードイン/アウト、スライドアップ/ダウンさせる方法を説明する。

  • このエントリーをはてなブックマークに追加

 jQueryでは、典型的なアニメーションを実装するためのメソッドとして、以下のようなメソッドが用意されています。

メソッド概要
show 要素を表示状態に
hide 要素を非表示状態に
slideDown 要素をスライドダウンして表示状態に
slideUp 要素をスライドアップして非表示状態に
fadeIn 要素をフェードインして表示状態に
fadeOut 要素をフェードアウトして非表示状態に
主なアニメーション関連メソッド

 これらアニメーションメソッドは、それぞれ以下の構文で利用できます。

[構文]アニメーションメソッド

method([dur [,complete]])

  • method: アニメーションメソッド
  • dur: 再生時間
  • complete: 再生終了後に実行する処理

 例えば以下は、ページロード時に画像をスライドアップ→スライドダウンする例です。また、アニメーション終了時に完了メッセージをダイアログ表示します。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<div id="logo">
  <img src="http://www.web-deli.com/image/home_chara.gif" alt="WebDeli" />
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
  // 画像をスライドアップ→スライドダウン
  $('#logo')
    .slideUp(3000)
    .slideDown(3000, function() {
      // アニメーション終了時に
      window.alert('アニメーションが完了しました。');
    });
});
</script>
</body>
</html>
ページロード時にアニメーションを実行するコード(slideup.html)
アニメーションが実行される

アニメーションが実行される

スライドアップした後、スライドダウンし、最後にダイアログ表示
スライドアップした後、スライドダウンし、最後にダイアログ表示

 アニメーションメソッドをメソッドチェーンで連結して呼び出した場合、アニメーションは記述順に実行されます。複数のアニメーションを並列に実行する方法については、後日「自作のアニメーションを実行するには?」で解説の予定です。

アニメーションによる変化の度合いを調整する

 アニメーションメソッドの第2引数(引数durcompleteの間)では、「変化の度合い(イージング)」を指定することもできます。

JavaScript
$('#logo')
  .slideUp(3000, 'swing')
  .slideDown(3000, 'linear', function() {
    // アニメーション終了時に
    window.alert('アニメーションが完了しました。');
  });
イージングを指定したコード

 jQueryデフォルトで利用できるイージングは以下の2種類だけです。

設定値概要
linear 等速
swing 徐々に加速、最後に減速
デフォルトで利用できるイージング値

 ただし、イージングは、例えばjQuery UIを導入することで拡張できます。jQuery UIで利用できるイージングについては、以下のページも参考にしてください。

透明度を指定できるfadeToメソッドも

 fadeInfadeOutメソッドが透明度(opacity)を01に変化させるメソッドであるのに対して、透明度を自由に指定できるfadeToというメソッドもあります。例えば以下のコードでは、マウスポインターを乗せると画像が半透明になり、外すと元に戻るサンプルです。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<div id="logo">
  <img src="http://www.web-deli.com/image/home_chara.gif" alt="WebDeli" />
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
  $('#logo').hover(
    // マウスをホバーした時に半透明に
    function(e) {
      $(this).fadeTo(500, 0.5);
    },
    // マウスを外した時に不透明に
    function(e) {
      $(this).fadeTo(500, 1);
    }
  );
});
</script>
</body>
</html>
マウスを乗せた/外した時に透明度を変化させるコード(fadeTo.html)
マウスポインターを載せた状態

マウスポインターを載せた状態

マウスポインターを外した状態

マウスポインターを外した状態

マウスを乗せると画像が半透明に

 fadeToメソッドの第2引数が透明度を表します。0が完全に透明、1が不透明を表します。

処理対象:基本 カテゴリ:アニメーション
処理対象:フェード カテゴリ:アニメーション
処理対象:スライド カテゴリ:アニメーション
API:.show()/.hide() カテゴリ:Effects(エフェクト) > Basics
API:.fadeIn()/.fadeOut() カテゴリ:Effects(エフェクト) > Fading
API:.slideUp()/.slideDown() カテゴリ:Effects(エフェクト) > Sliding

※以下では、本稿の前後を合わせて5回分(第22回~第26回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery逆引きリファレンス
22. イベント処理を中断するには?(preventDefault/stopPropagation/stopImmediatePropagation)

イベントリスナーによる処理を、イベントオブジェクトの3つのメソッドを使って中断する方法を説明する。また、それぞれの使い分け方法も解説する。

jQuery逆引きリファレンス
23. 非同期通信で取得したコンテンツをページに反映させるには?(load)

loadメソッドを使って、外部のWebページを非同期に取得して、それをコンテンツ内の要素に反映させる方法を説明する。

jQuery逆引きリファレンス
24. 【現在、表示中】≫ あらかじめ用意されたアニメーションを実行するには?(show/hide/fadeIn/fadeOut/slideUp/slideDown)

jQueryが提供する基本的なアニメーション機能を活用して、要素を表示/非表示、フェードイン/アウト、スライドアップ/ダウンさせる方法を説明する。

jQuery逆引きリファレンス
25. 実行都度、逆のアニメーションを実行するには?(toggle/fadeToggle/slideToggle)

jQueryが提供する基本的なアニメーション機能を活用して、スライドアップ⇔スライドダウンを交互に実行する方法を説明する。

jQuery逆引きリファレンス
26. 自作のアニメーションを実行するには?(animate)

animateメソッドを使って、典型的なアニメーションではなく、カスタムのアニメーションを定義する方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!