アニメーション効果

jQuery なら、Ｗｅｂページに動きを付けるアニメーション効果も実装できます。

HTML 要素のサイズや位置、透明度を時間の経過とともに徐々に変化させ、動いているように見せるものです。jQuery では、animate() メソッドがあらかじめ用意されています。

アニメーション関連の命令のまとめ

命令	意味	デモ
show(…)	要素を徐々に表示する	Demo01
show(…)	要素を徐々に表示した後に、コールバック関数を追加	Demo02
hide(…)	要素を徐々に非表示にする	Demo03
hide(…)	アニメーション中の要素にはアニメーション処理をしない	Demo04
toggle(…)	要素の表示・非表示を交互に切り替える	Demo05
slideDown(…)	要素をスライドアニメーションで表示する	Demo06
slideUp(…)	要素をスライドアニメーションで非表示にする	Demo06
slideToggle(…)	要素の表示・非表示をスライドアニメーションで切り替える	Demo07
fadeIn(…)	要素をフェードインで表示する	Demo08
fadeOut(…)	要素をフェードアウトで非表示にする	Demo08
fadeTo(…)	要素の透明度を指定した値に徐々に変更する	Demo09
animate(…)	任意のＣＳＳプロパティの値を徐々に変更する	Demo10

非表示状態の要素を表示する show()

show() は、CSS の display プロパティの値が none、つまり非表示の HTML 要素を、アニメーションしながら表示する命令です。

要素の透明度を透明から不透明に、サイズ（高さ／幅）を 0 から本来のサイズに徐々に変化させ、最終的に display プロパティの値を block に切り替えます。

対象となる要素はセレクターで指定し、show(…) の括弧内にアニメーションのスピードを指定します。

• show() の記述
  • $(セレクター).show(スピード);

例 show()

［表示］ボタンがクリックされると、要素が左上から右下へ少しずつ拡大されながら表示します。

Demo01: クリック ⇒ demo01_jq07_show01.html

• HTML
  • <button>表示</button>
  • <div></div>

• CSS
  • div {
  •   width: 200px;
  •   height: 200px;
  •   background: red;
  •   display: none;
  • }

• JavaScript
  • &(function(){
  •   $("button").click(function(){
  •     $("div").show("slow");
  •   });
  • });

アニメーションのスピードは slow、fast のいずれか、またはミリ秒（1秒=1000ミリ秒）で指定します。

なおミリ秒で指定する場合は "（ダブルクォーテーション）で囲む必要はありません。

• ミリ秒でスピードを指定
  • 　　$("div").show(1000);

スピードの指定を省略すると、show() はアニメーション処理をせず、非表示の要素を即座に表示します。

show() にコールバック関数を設定する

show(…) はスピードの後ろに、コールバック関数 を設定できます。

これが行われない時は、ブラウザがスクリプトを読んだ段階ですぐに処理を実行しようとし、ページの読み込みが終わっていない時点で処理を実行することとなり、希望通りの結果が出ません。

• show() にコールバック関数を設定する
  • $(セレクター).show(スピード,コールバック関数);

コールバック関数 とは、アニメーション処理が完了した後に続けて実行される命令です。「処理が終わったら、この関数を呼び出して」と指定するので、コールバック関数と呼ばれます。

function(){…} の形式で指定し、{…} に処理の内容を記述します。jQuery ではメソッドチェーンで続けて実行する命令を記述することができますが、メソッドチェーンで記述した命令がアニメーションの終了を待たずに即座に実行されるに対して、コールバック関数はアニメーションの終了が終わってから実行されます。

次のデモは、Demo01 のコードに、コールバック関数を追加しました。アニメーションが終了した後に、拡大した要素の背景色を青色に変更します。

Demo02: クリック ⇒ demo02_jq07_show02.html

• show() にコールバック関数を設定する
  • 　$(function(){
  • 　　$("button").click(function(){
  • 　　　$("div").show("slow",function(){
  • 　　　　$(this).css("background","blue");
  • 　　　});
  • 　　});
  • 　});
  • </script>

追加設定されたコールバック関数では、アニメーションが終了したあとに、css() で div 要素の背景色を変更しています。

表示中の要素を非表示にする hide()

hide() は、slow() の逆の働きをする命令です。表示状態（display: block;）の HTML 要素を非表示（display: none;）に変更します。

hide(…) のカッコ内にはアニメーションのスピードとコールバック関数を設定できます。設定したスピードで透明度、サイズ（高さ／幅）を徐々に変化させながら要素を非表示にします。

• hide
  • 　$(セレクター).hide(スピード,コールバック関数);

例：要素の表示・非表示を切り替える

次に紹介するのは、Demo01 に非表示ボタンを追加しました。［表示］ボタンで、要素を表示し、［非表示］ボタンで非表示にします。

Demo03: クリック ⇒ demo03_jq07_hide01.html

• HTML
  • <button id="show">表示</button>
  • <button id="hide">非表示</button>
  • <div></div>

• JavaScript
  • &(function(){
  •   $("button#show").click(function(){
  •     $("div").show("slow");
  •   })
  •   $("button#hide").hide(function(){
  •     $("div").hide("slow");
  •   });
  • });

［表示］ボタンには id 属性値を show に、［非表示］ボタンには id 属性値を hide にして、div 要素の表示・非表示を切り替えます。

例：「アニメーションが止まらない」を解決する

上のDemo03では実用上問題が発生することがあります。show()／hide() は１回のアニメーション処理が終わってから次のアニメーションを実行するので、アニメーションの実行中に表示・非表示ボタンをすばやく交互に何度もクリックすると、クリックした回数のアニメーションが完全に終了するまで待たなければならなくなります。

この問題を解決するのが、アニメーション処理中の要素を選択できるセレクター :animated です。:not() と組み合わせて :not(:animated) と記述すると、「アニメーション処理中ではない要素」を絞り込めます。

これを使って Demo03 を改良したのが次の Demo04です。

Demo04: クリック ⇒ demo04_jq07_hide02.html

• 改良した JavaScript
  • &(function(){
  •   $("button#show").click(function(){
  •     $("div:not(:animated)").show("slow");
  •   })
  •   $("button#hide").hide(function(){
  •     $("div:not(:animated)").hide("slow");
  •   });
  • });

これにより、div 要素がアニメーションしていない時だけ show()／hide() が実行され、アニメーション中は実行されません。

要素の表示・非表示を交互に切り替える toggle()

$(toggle) は、要素の表示・非表示を交互に切り替える命令です。

セレクターで指定した要素が表示されている場合は非表示に、非表示の場合は表示状態に変更します。

toggle(…) の括弧内にはアニメーションのスピードとコールバック関数を指定できます。

• toggle()
  • 　$(セレクター).toggle(スピード,コールバック関数)

例：ボタンをクリックするたびに要素の表示・非表示を交互に切り替える

Demo05: クリック ⇒ demo05_jq07_toggle01.html

• JavaScript
  •  $(function(){
  •    $("button").click(function(){
  •    　$("div:not(:animated)").toggle("slow");
  •    });
  •  });

• HTML
  •  <button>表示・非表示</button>
  •  <div></div>

表示・非表示をスライドで切り替える slideDown() / slideUp()

slideDown() / slideUp() は、セレクターで指定した要素の表示・非表示をスライドアニメーションで切り替える命令です。

slideDown() は、非表示の要素の高さ 0 から本来の高さに徐々に近づけながら表示します。

slideUp() は、表示状態の要素の高さを徐々に 0 に近づけながら非表示にします。

• JavaScript
  • 　$(セレクター).slideDown(スピード,コールバック関数);
  • 　$(セレクター).slideUp(スピード,コールバック関数);

サンプル６：　開閉パネル

slideDown() / slideUp() を使って作成した開閉パネル（Collapsible-Panel）と呼ばれる UI（ユーザーインターフェイス）です。

Demo06: クリック ⇒ demo06_jq07_collapsiblepanel01.html

• HTML
  • <dl>
  • 　<dt>スライドとして表示状態を切り替える</dt>
  • 　<dd>
  • 　　slideDown() と slideUp()、show() や hide() とは違い
  • 　　アニメーションで表示非表示っを切り替える命令です。
  • 　</dd>
  • </dl>

• CSS
  • dl {
  • 　width: 300px;
  • 　margin: 50px auto;
  • }
  • dl dt {
  • 　background: #7cadb6;
  • 　cursor: pointer;
  • }
  • dl dd {
  • 　border:1px solid #7cadb6;
  • 　height: 300px;
  • 　margin: 0;
  • }

• JavaScript
  •   $(function(){
  •     $("dt").click(function(){
  •       if($("dd").css("display")=="block"){
  •         $("dd:not(:animated)").slideUp("slow");
  •       }else{
  •         $("dd").slideDown("slow");
  •       }
  •     });
  •   });

表示・非表示をスライドで交互に切り替える slideToggle()

slideToggle() は、toggle() のスライドアニメーション版です。セレクターで指定した要素が、表示されている場合は非表示に、非表示の場合は表示状態に、スライドアニメーションで切り替えます。

• JavaScript
  • 　$(セレクター).slideTogether(スピード,コールバック関数);

例７：

Demo07 は Demo06 を slidetoggle() を使って書き直したものです。

Demo07: クリック ⇒ demo07_jq07_slidetoggle01.html

• JavaScript
  •   $(function(){
  •     $("dt").click(function(){
  •         $("dd:not(:animated)").slideToggle("slow");
  •     });
  •   });

表示状態をフェード効果で切り替える fadeIn() / fadeOut()

fadeIn() ／ fadeOut() は、フェードイン・フェードアウトしながら HTML 要素の表示・非表示を切り替える命令です。

透明度（CSS の opacity プロパティ）の値を徐々に変更することで、フェード効果を実現します。

• JavaScript
  • 　$(セレクター).fadeIn(スピード,コールバック関数);
  • 　$(セレクター).fadeOut(スピード,コールバック関数);

例８：

表示ボタン（id 属性が fadeIn の button 要素）がクリックされると、CSS で非表示（display: none）に設定していた img 要素をフェードインで表示します。

非表示ボタン（id 属性が fadeout の button 要素）がクリックされると、逆に img 要素をフェードアウトで非表示にします。

Demo08: クリック ⇒ demo08_jq07_fade01.html

• HTML
  • <button id="fadein">表示</button>
  • <button id="fadeout">非表示</button>
  • <p><img src="../imgs/demo_flower01.jpg" alt="flower"></p>

• CSS
  • img {
  • 　display: none;
  • }

• JavaScript
  •   $(function(){
  •     $("button#fadein").click(function(){
  •       $("img:not(:animated)").fadeIn("slow");
  •     });
  •     $("button#fadeout").click(function(){
  •       $("img:not(:animated)").fadeOut("slow");
  •     });
  •   });

表示ボタンをクリックすると画像がフェードインで表示、非表示ボタンをクリックするとフェードアウトで画像が非表示になる。

透明度を徐々に変更する fadeTo()

fadeTo() は、セレクターで指定した要素の透明度（CSS の opacity プロパティ）を、設定した値にまで徐々に変更する命令です。

括弧内には、スピード、透明度、コールバック関数を記述します。透明度は 0（非表示）～ 1（表示）の数値で指定できます。値が 0.5 は透明度は 50% となります。

• JavaScript
  • $(セレクター).fadeTo(スピード,透明度,コールバック関数)

例９：

表示ボタン（id 属性が fade100 の button 要素）がクリックされると、img 要素の透明度 1 に、半透明ボタン（id 属性が fade50 の button 要素）がクリックされると、透明度 0.5 に、非表示ボタン（id 属性が fade0 の button 要素）がクリックされると、透明度 0 に変更表示します。

Demo09: クリック ⇒ demo09_jq07_fadeto01.html

• HTML
  • <button id="fade100">表示</button>
  • <button id="fade50">半透明</button>
  • <button id="fade0">非表示</button>
  • <p><img src="../imgs/demo_flower01.jpg" alt="flower"></p>

• CSS
  • img {
  • 　display: none;
  • }

• JavaScript
  •   $(function(){
  •     $("button#fade100").click(function(){
  •       $("img:not(:animated)").fadeTo("slow",1);
  •     });
  •     $("button#fade50").click(function(){
  •       $("img:not(:animated)").fadeTo("slow",0.5);
  •     });
  •     $("button#fade0").click(function(){
  •       $("img:not(:animated)").fadeTo("slow",0);
  •     });
  •   });

クリックしたボタンに応じて、画像の表示・半透明・非表示が切り替わります。

独自のアニメーションを設定する animate()

任意の CSS プロパティの値 を徐々に変化させて独自のアニメーション効果を作成できる命令が、 animate() です。括弧内には、CSS プロパティ（プロパティ名と値）、アニメーションのスピード、動き（easing）、コールバック関数を指定します。

• JavaScript
  • $(セレクター).animate(値を変更したい CSS プロパティ,スピード,動き,コールバック関数)
• animate() メソッドの構文
  • 

• animate() に設定できる CSS プロパティは、height、top、opacity のように数値（px、em、%）であらわせるものに限り、color のように数値以外の値を指定するプロパティには対応してはおりません。書き方は css() で、プロパティ名と値を : （コロン）でつなぎ、'（シングルクォーテーション）または " （ダブルクォーテーション）で囲みます。複数のプロパティは、, （カンマ）でつなぎます。
• アニメーション時間（スピード）は「どのくらい時間をかけてアニメーションさせるか」を指定します。時間の単位はミリ秒です。
• 動きには linear または swing を設定できます。linear は常に一定の速度（等速）で、swing は最初ゆっくり・後半は速い速度で変化をつけながら、値を変更します。指定を省略した場合は swing が適用される。

例１０－０１：animate() で画像を左右にスライドさせる

画像（img 要素）がクリックされると、クリックされた画像を左または右方向にスライドさせ、別の画像に切り替えるアニメーション効果の例です。

Demo10-01: クリック ⇒ demo_jq07_10_animate01.html

• HTML
  • <div><p>
  • <img src="../imgs/demo_flower01.jpg" alt="flower" id="flower">
  • <img src="../imgs/demo_building01.jpg" alt="building" id="bilding">
  • </p></div>

• CSS
  • p {
  • 　width: 1280px;
  • 　height: 480px;
  • 　margin: 0;
  • }
  • div {
  • 　width: 640px;
  • 　height: 480px;
  • 　overflow: hidden;
  • }

• JavaScript
  •   $(function(){
  •     $("#flower").click(function(){
  •       $("p:not(:animated)").animate({
  • 　　　"margin-left" : "-480px"
  • 　　},"slow","swing");
  •     });
  •     $("#building").click(function(){
  •       $("p:not(:animated)").animate({
  • 　　　"margin-left" : "0"
  • 　　},"slow","swing");
  •     });
  •   });

クリックしたボタンに応じて、左右にスライドさせ、別の画像に切り替えます。

例１０－０２：文字列が消えるアニメーション

徐々に文字列が消えるアニメーションです。

Demo10-02: クリック ⇒ demo_jq07_10_animate02.html

• HTML
  • <div class="page-main">
  •   <div id="typo">
  •     <div class="inner">ごきげんよう</div>
  •   </div>
  • </div>

• CSS
  • .page-main {
  • 　position: relative;
  • }
  • .page-main > div {
  •   padding: 50px 0 100px;
  • }
  • #typo {
  •   margin: 0;
  •   padding: 0;
  •   background-color: #3498db;
  •   font-weight: bold;
  •   font-size: 120px;
  •   color: #ffffff;
  •   text-align: center;
  •   line-height: 500px;
  •   height: 500px;
  • }
  • #typo .inner{
  •   position: relative;
  •   width: 1000px;
  •   margin: 0 auto;
  • }

• JavaScript
  •   $(function(){
  •     $('#typo').on('click', function(){
  •         $('#typo .inner').animate({
  •                         opacity: 0, 　　　要素の不透明度（opacity）が徐々に「0」（透明）になる
  •                         fontSize: '0px'　 要素の文字サイズ（fontSize）が徐々に「0px」になる
  •                     },
  •                     1500 　　　　　　　アニメーションにかける時間を１．５秒とする
  •           );
  •     });
  •   });
    

• 解説 　　　　　　
  • on()メソッドについては、こちらを参照します。
  • #typo .inner の要素内に対して animate() メソッドが実行されます。

文字列をクリックするとアニメーションが開始されて徐々に文字列が消えていきます。。

例１０－０３：文字列の位置が変化するアニメーション

文字列の位置が変化するアニメーションです。

Demo10-03: クリック ⇒ demo_jq07_10_animate03.html

• JavaScript
  •   $(function(){
  •     $('#typo')
  •         .css('top', '-100px')                         ←①
  •         .on('click', function(){                      ←②
  •                 $('#typo .inner').animate({      ←③
  •                         top: '100px' 　　　
  •                     },
  •                     1500,
  •                     'swing'
  •           );
  •     });
  •   });
    

• 解説 　　　　　　
  • ①最初に .css('top', '-100px') を実行して文字列の位置を変更します。
  • ②要素をクリックした時点で animate() メソッドを実行する。
  • ③animate() メソッドでは、文字列を top:'100px' の位置に、軽い緩急で移動する。

文字列をクリックするとアニメーションが開始されて徐々に文字列が移動します。

例１０－０４：　アニメーション終了時に実行する処理

animate() メソッドでは、アニメーション終了時に実行する処理を指定できます。メソッドの引数に function(){ }を指定します。

Demo10-04: クリック ⇒ demo_jq07_10_animate04.html

• JavaScript
  •   $(function(){
  •     $('#typo')
  •         .css('top', '-100px')                         ←①
  •         .on('click', function(){                      ←②
  •                 $('#typo .inner').animate({      ←③
  •                         top: '100px'
  •                     },
  •                     1500,
  •                     'swing',
  •                     function(){                         ←④
  •                          $('#typo .inner').animate({top: '0px'}, 1000,'swing');
  •                     }
    
  •           );
  •     });
  •   });
    

• 解説 　　　　　　
  • ①、②、③は、例１０－０３を参照。
  • ④アニメーション終了時に実行する処理の記述。

文字列の位置が top から -100px → 100px → 0px の位置に移動するアニメーションでした。

次に、jQuery の命令 を見てみましょう。