fadeIn() / fadeout()-jQueryメソッド

fadeIn()メソッド

詳細

 動 作 

非表示（display:none;)になっているjQueryオブジェクトを指定した時間で不透明度を上げて表示させるメソッド。

 

 引 数 

時間：フェードインする時間を指定。
コールバック関数：フェードインが完了した後に実行する関数を指定。

fadeOut()メソッド

詳細

 動 作 

jQueryオブジェクトを指定した時間で透明度を下げて非表示にするメソッド。

 

 引 数 

時間：フェードアウトさせる時間を指定。
コールバック関数：フェードアウトが完了した後に実行する関数を指定。

コード例

 HTML 

<div>
<h2>fadeIn() fadeOut()</h2>
</div>
<button>テストボタン</button>

 CSS 

div{
  width:250px;
  height:30px;
  background-color:orange;
  margin:10px;
  padding:10px 30px;
}
h2{
  display:none;
  margin:0;
}

 jQuery 

$('button').click(function(){
  $('h2').fadeIn(4000,function(){
  $(this).fadeOut(4000);
});
});

 実装 

See the Pen
fadeIn(),fadeOut() by roymoy (@roymoy)
on CodePen.