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

jQuery逆引きリファレンス

アニメーションの細かな挙動を制御するには?(animate/show/hide/fadeIn/fadeOut/slideUp/slideDown)

2015年9月10日

各種アニメーションメソッドで、アニメーションを直列/並列に実行したり、アニメーション処理ごとに関数を実行したり、プロパティ単位でアニメーションのイージングを設定したりする方法を説明。

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

 animateメソッドfadeInfadeOutなどのアニメーションメソッドでは、それぞれ引数に「パラメーター名: 値」形式のハッシュを渡すことで、細かなパラメーターを指定することもできます。

[構文]animateメソッド(第2構文)

animate(props, opts)

  • props: アニメーション定義(「スタイルプロパティ: 値」のハッシュ)
  • opts: 動作オプション(「パラメーター名: 値」のハッシュ)

[構文]アニメーションメソッド(第2構文)

method(opts)

  • opts: 動作オプション(「パラメーター名: 値」のハッシュ)

 以下では、引数optsで利用できる主なパラメーターをまとめます。

パラメーター名概要
duration アニメーションの再生時間(ミリ秒)
easing 変化の度合い(イージング)
specialEasing スタイルプロパティの単位にイージングを設定
queue アニメーションをキューに追加するか
step アニメーションの再生中に連続して呼び出されるコールバック関数
complete アニメーションの終了時に実行するコールバック関数
アニメーションメソッドで利用可能な主なパラメーター

 このうち、durationeasingcompleteについては、上記2つのTIPSで紹介した構文でも実装できるものなので、本稿では残るspecialEasingqueuestepについて触れていきます。

アニメーションを直列/並列に実行する

 アニメーションメソッドをメソッドチェーンで連結した場合、デフォルトでは順番に実行されます。これを並列に実行させたい場合、queueパラメーターにfalseを指定します。

 例えば以下は、画像に対して、スライドアップ/フェードアウト効果を同時に実行する例です。

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({
       duration: 3000,
       queue: false
     })
     .fadeOut({
       duration: 3000,
       queue: false
     });
});
</script>
</body>
</html>
複数のアニメーションを同時に実行するためのコード(queue.html)
アニメーションが並列実行される

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

画像をスライドアップしながらフェードアウト
画像をスライドアップしながらフェードアウト

アニメーションの処理を追跡する

 stepパラメーターを利用することで、アニメーションの処理ステップごとにコールバック関数を実行できます。例えば以下は、画像を拡大する過程で、heightプロパティの変化を出力する例です。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<img id="logo"
  src="http://www.web-deli.com/image/home_chara.gif" alt="WebDeli" />
<div>現在値:<span id="current"></span></div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
  $('#logo').animate(
    {
      height: '300px'
    },
    {
      duration: 10000,
      step: function(step) {
        $('#current').text(step);
      }
  });
});
</script>
</body>
</html>
アニメーションの処理ステップごとに処理を実行するコード(step.html)
アニメーションの処理ごとにコールバック関数が呼び出される

アニメーションの処理ごとにコールバック関数が呼び出される

現在の高さを順番に表示
現在の高さを順番に表示

 step関数は、引数として現在値(ここではheightプロパティの値)を受け取りますので、ここでは、この値を<span id="current">要素に表示しています。

プロパティ単位にイージングを設定する

 specialEasingパラメーターを利用することで、「プロパティ名: イージング名」のハッシュ形式で、スタイルプロパティの単位にイージング(=変化の度合い)を設定できます。

 例えば以下は、画像を非表示にする際にwidth(幅)、height(高さ)それぞれに対して異なるイージングを指定した例です。jQuery標準で利用できるイージングは限られていますので、ここではjQuery UIもインポートし、拡張されたイージングを利用しています。jQuery UIで提供されるイージングについては、公式ページにある各種「Easings」のグラフを参照してください。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<img id="logo" src="http://www.web-deli.com/image/home_chara.gif" alt="WebDeli" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script>
$(function() {
   $('#logo').hide({
     duration: 8000,
     specialEasing: {
       width: 'easeInBounce',
       height: 'easeOutBack'
     }
   });
});
</script>
</body>
</html>
height/widthプロパティに別々のイージングを設定するコード(specialEasing.html)
処理対象:基本 カテゴリ:アニメーション
処理対象:フェード カテゴリ:アニメーション
処理対象:スライド カテゴリ:アニメーション
API:.show()/.hide() カテゴリ:Effects(エフェクト) > Basics
API:.fadeIn()/.fadeOut() カテゴリ:Effects(エフェクト) > Fading
API:.slideUp()/.slideDown() カテゴリ:Effects(エフェクト) > Sliding
API:.animate() カテゴリ:Effects(エフェクト) > Custom

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

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

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

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

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

jQuery逆引きリファレンス
27. 【現在、表示中】≫ アニメーションの細かな挙動を制御するには?(animate/show/hide/fadeIn/fadeOut/slideUp/slideDown)

各種アニメーションメソッドで、アニメーションを直列/並列に実行したり、アニメーション処理ごとに関数を実行したり、プロパティ単位でアニメーションのイージングを設定したりする方法を説明。

jQuery逆引きリファレンス
28. 要素にフォーカスが当たった/外れた時の処理を実装するには?(focus、blur、focusin、focusout)

focus/blurもしくはfocusin/focusoutを使って、テキストボックスにフォーカスを当てた時/外した時に処理を実施する方法を説明。またそれらの挙動の違いを解説する。

jQuery逆引きリファレンス
29. JavaScriptとHTMLを明確に分離するには?(data)

jQueryのdataメソッドを使って独自データ属性の値を取得することにより、「控えめなJavaScript」を実現する方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!