jQueryでアニメーション！フェードイン！
今回は、jQueryでアニメーション！フェードインやフェードアウトの「フェード系」のアニメーションについて記載していきます。
jQueryでアニメーション、「要素をフェードインさせたいけど、どうやって記述するの？」や「フェードアウトはどうするの？」などの初心者向けの疑問にお答えする形で、サンプルコードと共に記載していこうと思います。
という事で、それでは今回はッ、
- ・jQuery要素を隠す:hide()メソッド
- ・jQuery要素を表示する:show()メソッド
- ・フェードアウトで非表示:fadeOut()メソッド
- ・フェードインで表示する:fadeIn()メソッド
- ・不透明度をアニメーション:fadeTo()メソッド
上記について記載していこうと思います…。
jQuery要素を隠す:hide()メソッド
jQueryのアニメーションを扱えるエフェクト系メソッドを記載していきます。エフェクト系メソッドを使えば、HTML+CSSではできなかった「動き」を、Webページに加えることができるようになります。
まず初めは、hide()メソッドを紹介します。
hide()メソッドは、要素を隠してしまうメソッドで、正確にはdisplay:none;にしてしまうメソッドになります。
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#list”).hide();
});
</script>
</head>
<body>
・・省略・・
<ul id=”list”>
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
</ul>
<p>hide()メソッドは、要素を隠すメソッドです！</p>
・・省略・・
</body>
</html>
hide()メソッドは、要素を隠すメソッドです！
HTMLソースでは、ul要素をリストでマークアップされていますが、ブラウザではリストが表示されません。hide()メソッドによって、display:none;となっているためです。アニメーションを記載するはずですが、このサンプルでは、いきなり非表示になってしまいます。
実はアニメーションを設定するには、アニメーションにかける「時間」を指定する必要があります。上記のhide()だけでは、時間を指定していなかったために、一瞬で非表示になってしまったという事になります。
それではアニメーションの時間を指定してみます。時間の設定は、「slow」「fast」のいずれか、もしくはミリ秒で指定することができます。
hide( “fast” )←——–200ミリ秒
hide( 1000 )←——–ミリ秒で指定する場合
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#list”).hide(1000);
});
</script>
</head>
<body>
・・省略・・
<ul id=”list”>
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
</ul>
<p>hide()メソッドは、要素を隠すメソッドです！</p>
・・省略・・
</body>
</html>
- HTML
- CSS
- jQuery
hide()メソッドは、要素を隠すメソッドです！
↓↓↓ 1000ミリ秒（1秒）かけて要素が非表示になります ↓↓↓
hide()メソッドは、要素を隠すメソッドです！
jQuery要素を表示する:show()メソッド
show()メソッドは、hide()メソッドの逆、要素を表示するメソッドです。hide()のときと同様、時間を指定しなければ一瞬で表示してしまいます。また、表示させる要素にCSSでdisplay:none;を指定しておくことがポイントになります。
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<style>
#list {display:none;}
</style>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#list”).show(“slow”);
});
</script>
</head>
<body>
・・省略・・
<ul id=”list”>
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
</ul>
<p>show()メソッドは、要素を表示するメソッドです！</p>
・・省略・・
</body>
</html>
show()メソッドは、要素を表示するメソッドです！
↓↓↓ 600ミリ秒（0.6秒）かけて要素が非表示になります ↓↓↓
- HTML
- CSS
- jQuery
show()メソッドは、要素を表示するメソッドです！
スタイルシートでは、display:none（非表示）にしてあったul要素が、アニメーションしながら表示されます。
フェードアウトで非表示:fadeOut()メソッド
fadeOut()メソッドは、要素をフェードアウトさせながら、最終的には非表示するメソッドです。すでに予想がつくことと思いますが、反対のエフェクトにはfadeIn()メソッドがあります。
fadeOut()メソッドも、hide()メソッドと同じように、最終的にはdisplay:noneになります。パラメータは、hide()、show()、メソッドと同じように、「slow」「fast」のキーワードか、ミリ秒で指定します。fadeOut()と空で指定すると、デフォルトのスピード400ミリ秒になります。
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#list”).fadeOut(2000);
});
</script>
</head>
<body>
・・省略・・
<ul id=”list”>
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
</ul>
<p>fadeOut()メソッドは、要素を非表示にするメソッドです！</p>
・・省略・・
</body>
</html>
- HTML
- CSS
- jQuery
fadeOut()メソッドは、要素を非表示にするメソッドです！
↓↓↓ 2000ミリ秒（2秒）かけて要素が非表示になります ↓↓↓
fadeOut()メソッドは、要素を非表示にするメソッドです！
最後は非表示になります。display:noneになるため表示領域もなくなり、すぐ次にレイアウトしている
要素が上に移動することになります。
フェードインで表示する:fadeIn()メソッド
fadeIn()メソッドは、先ほどのfadeOut()メソッドの反対です。フェードインしながら表示するメソッドです。また、表示させる要素にCSSでdisplay:none;を指定しておくことがポイントになります。
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<style>
#list {display:none;}
</style>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#list”).fadeIn(3000);
});
</script>
</head>
<body>
・・省略・・
<ul id=”list”>
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
</ul>
<p>fadeIn()メソッドは、要素を表示するメソッドです！</p>
・・省略・・
</body>
</html>
fadeIn()メソッドは、要素を表示するメソッドです！
↓↓↓ 3000ミリ秒（3秒）かけて要素が非表示になります ↓↓↓
- HTML
- CSS
- jQuery
fadeIn()メソッドは、要素を表示するメソッドです！
fadeIn()メソッドも、show()メソッドのときと同じように、最終的にはもともとの要素が持つdisplayプロパティの値に従って、display:block、またはdisplay:inlineになります。
不透明度をアニメーション:fadeTo()メソッド
fadeTo()メソッドは、fadeIn()、fadeOut()に似たメソッドです。違うのは要素の不透明度を変更している点になります。opacityを0にすれば、フェードアウトと同じような表現になりますが、最終的にdisplay:noneになるわけではありません。下記サンプルを見ると理解しやすいことと思います。
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#list”).fadeTo(3000,0);
});
</script>
</head>
<body>
・・省略・・
<ul id=”list”>
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
</ul>
<p>fadeTo()メソッドは、要素の不透明度を操作するメソッドです！</p>
・・省略・・
</body>
</html>
- HTML
- CSS
- jQuery
fadeTo()メソッドは、要素の不透明度を操作するメソッドです！
↓↓↓ 3000ミリ秒（3秒）かけて要素が透明になります ↓↓↓
- HTML
- CSS
- jQuery
fadeTo()メソッドは、要素の不透明度を操作するメソッドです！
最終的に非表示になったとしても、不透明度を0（ゼロ）にしているだけなので、もともとの領域は、当然確保されます。ただ見えていないだけになります。fadeOut()のときとはこのような違いがあるので注意が必要です。
また、fadeTo()の場合は、スピードと不透明度の両方を指定しなくてはなりません。記述方法は下記のようになります。
fadeTo(“slow”,0.5)
fadeTo(2000,1)
そしてfadeToにはもうひとつ特徴があり、display:noneの要素に対して使用すると、自動的にdisplay:block（またはliline）に変更してからフェードしてくれます。
という事で今回は、jQueryでアニメーションのさわりの部分をサンプルコードと共に記載してみました。
個人的に、jQueryはHTMLなどよりも、記述のルールが多少複雑になりますので、覚えるためには実際に手を動かすことが重要なように思います。また、慣れてしまえば、HTMLやCSS同様、すべて覚えることはないことと思いますが、記載ルールなどをしっかりと理解することで、実際のWeb制作にとても役立つことと思います。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
