jQueryでフェードイン、フェードアウト:fadeIn(), fadeOut()

jQueryで要素のアニメーションつきのフェードイン、フェードアウトをする方法を説明します。

要素をフェードインするfadeIn()

fadeIn()メソッドを使うことで、非表示になっている要素をフェードインするようにします。

アニメーションの速度

fadeIn("slow")のように引数を指定することで、アニメーションの速度を指定できます。アニメーションの速度は、「slow」「normal」「fast」、もしくは、完了までの時間をミリ秒単位で指示が可能です。

以下は、クリックというボタンを押すと、非表示になっていたターゲット要素がフェードインしてくるサンプルです。

HTML

<button id="button">クリック</button>
<div id="target" style="display:none">ターゲット</div>

jQuery

$("#button").on("click",function(){
  $("#target").fadeIn("slow");  
});

フェードインのサンプル

See the Pen [jQuery] フェードインのサンプル by Yuichi Iwayama (@UXMILK) on CodePen.

要素をフェードアウトfadeOut()

fadeIn()メソッドとは逆に、表示されている要素をアニメーションつきで非表示にするにはfadeOut()メソッドを使います。アニメーションの速度は、fadeInと同じように指定できます。

HTML

<button id="button">クリック</button>
<div id="target">ターゲット</div>

jQuery

$("#button").on("click",function(){
  $("#target").fadeOut("slow");  
});

フェードアウトされた要素は「display: none;」となるだけで、削除はされないので気をつけてください。