2017/8/4更新

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

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

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

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

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

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

HTML

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

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

jQuery

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

$("#button").on("click",function(){

$("#target").fadeIn("slow");

});

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

HTML

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

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

jQuery

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

$("#button").on("click",function(){

$("#target").fadeOut("slow");

});

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

HTML jQuery