jQueryでアニメーション!フェードイン!

jQueryでアニメーション!フェードイン!

今回は、jQueryでアニメーション!フェードインやフェードアウトの「フェード系」のアニメーションについて記載していきます。

jQueryでアニメーション、「要素をフェードインさせたいけど、どうやって記述するの?」や「フェードアウトはどうするの?」などの初心者向けの疑問にお答えする形で、サンプルコードと共に記載していこうと思います。

という事で、それでは今回はッ、

  • ・jQuery要素を隠す:hide()メソッド
  • ・jQuery要素を表示する:show()メソッド
  • ・フェードアウトで非表示:fadeOut()メソッド
  • ・フェードインで表示する:fadeIn()メソッド
  • ・不透明度をアニメーション:fadeTo()メソッド

上記について記載していこうと思います…。

jQuery要素を隠す:hide()メソッド

jQueryのアニメーションを扱えるエフェクト系メソッドを記載していきます。エフェクト系メソッドを使えば、HTML+CSSではできなかった「動き」を、Webページに加えることができるようになります。

まず初めは、hide()メソッドを紹介します。
hide()メソッドは、要素を隠してしまうメソッドで、正確にはdisplay:none;にしてしまうメソッドになります。

サンプルソース<!DOCTYPE html>
<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>
  • HTML
  • CSS
  • jQuery

hide()メソッドは、要素を隠すメソッドです!

HTMLソースでは、ul要素をリストでマークアップされていますが、ブラウザではリストが表示されません。hide()メソッドによって、display:none;となっているためです。アニメーションを記載するはずですが、このサンプルでは、いきなり非表示になってしまいます。

実はアニメーションを設定するには、アニメーションにかける「時間」を指定する必要があります。上記のhide()だけでは、時間を指定していなかったために、一瞬で非表示になってしまったという事になります。

それではアニメーションの時間を指定してみます。時間の設定は、「slow」「fast」のいずれか、もしくはミリ秒で指定することができます。

hide( “slow” )←——–600ミリ秒
hide( “fast” )←——–200ミリ秒
hide( 1000 )←——–ミリ秒で指定する場合
サンプルソース<!DOCTYPE html>
<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秒)かけて要素が非表示になります ↓↓↓

  • HTML
  • CSS
  • jQuery

hide()メソッドは、要素を隠すメソッドです!

jQuery要素を表示する:show()メソッド

show()メソッドは、hide()メソッドの逆、要素を表示するメソッドです。hide()のときと同様、時間を指定しなければ一瞬で表示してしまいます。また、表示させる要素にCSSでdisplay:none;を指定しておくことがポイントになります。

サンプルソース2<!DOCTYPE html>
<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>
  • HTML
  • CSS
  • jQuery

show()メソッドは、要素を表示するメソッドです!

↓↓↓ 600ミリ秒(0.6秒)かけて要素が非表示になります ↓↓↓

  • HTML
  • CSS
  • jQuery

show()メソッドは、要素を表示するメソッドです!

スタイルシートでは、display:none(非表示)にしてあったul要素が、アニメーションしながら表示されます。

show()メソッドの働きshow()メソッドは表示するメソッド、という言い方をしていますが、CSS的にいうと、要素の持つ本来のdisplayプロパティに戻します。例えば、もともとブロックレベル要素であるul要素にshow()メソッドを使った場合は、display:blockになります。また、インライン要素であるimg要素の場合は、display:inlineに戻ります。

フェードアウトで非表示:fadeOut()メソッド

fadeOut()メソッドは、要素をフェードアウトさせながら、最終的には非表示するメソッドです。すでに予想がつくことと思いますが、反対のエフェクトにはfadeIn()メソッドがあります。

fadeOut()メソッドも、hide()メソッドと同じように、最終的にはdisplay:noneになります。パラメータは、hide()、show()、メソッドと同じように、「slow」「fast」のキーワードか、ミリ秒で指定します。fadeOut()と空で指定すると、デフォルトのスピード400ミリ秒になります。

サンプルソース3<!DOCTYPE html>
<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秒)かけて要素が非表示になります ↓↓↓

  • HTML
  • CSS
  • jQuery

fadeOut()メソッドは、要素を非表示にするメソッドです!

最後は非表示になります。display:noneになるため表示領域もなくなり、すぐ次にレイアウトしている

要素が上に移動することになります。

フェードインで表示する:fadeIn()メソッド

fadeIn()メソッドは、先ほどのfadeOut()メソッドの反対です。フェードインしながら表示するメソッドです。また、表示させる要素にCSSでdisplay:none;を指定しておくことがポイントになります。

サンプルソース4<!DOCTYPE html>
<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>
  • HTML
  • CSS
  • jQuery

fadeIn()メソッドは、要素を表示するメソッドです!

↓↓↓ 3000ミリ秒(3秒)かけて要素が非表示になります ↓↓↓

  • HTML
  • CSS
  • jQuery

fadeIn()メソッドは、要素を表示するメソッドです!

fadeIn()メソッドも、show()メソッドのときと同じように、最終的にはもともとの要素が持つdisplayプロパティの値に従って、display:block、またはdisplay:inlineになります。

フェード系エフェクトの実態?jQueryでのフェード系のエフェクトは、実のところ要素の不透明度(opacity)を変更して表現しています。フェードの最中に開発者ツールなどで要素を確認すると分かることと思います。

不透明度をアニメーション:fadeTo()メソッド

fadeTo()メソッドは、fadeIn()、fadeOut()に似たメソッドです。違うのは要素の不透明度を変更している点になります。opacityを0にすれば、フェードアウトと同じような表現になりますが、最終的にdisplay:noneになるわけではありません。下記サンプルを見ると理解しやすいことと思います。

サンプルソース5<!DOCTYPE html>
<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(“スピード”,不透明度)
fadeTo(“slow”,0.5)
fadeTo(2000,1)

そしてfadeToにはもうひとつ特徴があり、display:noneの要素に対して使用すると、自動的にdisplay:block(またはliline)に変更してからフェードしてくれます。

という事で今回は、jQueryでアニメーションのさわりの部分をサンプルコードと共に記載してみました。

個人的に、jQueryはHTMLなどよりも、記述のルールが多少複雑になりますので、覚えるためには実際に手を動かすことが重要なように思います。また、慣れてしまえば、HTMLやCSS同様、すべて覚えることはないことと思いますが、記載ルールなどをしっかりと理解することで、実際のWeb制作にとても役立つことと思います。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。