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

jQuery

スポンサードリンク

スポンサードリンク

fadeIn()メソッド

構文

jQueryオブジェクト.fadeIn(時間 ,コールバック関数);

詳細

 動 作 

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

 引 数 

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

fadeOut()メソッド

構文

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.

JavaScript・jQueryのおすすめの本

発売日:2018/6/8

JavaScriptの初級向けの本です。基本をわかりやすく丁寧に解説してくれてます。まず第一歩はこちらからの本から。

本当によくわかるJavaScriptの教科書 はじめての人も、挫折した人も、基礎力が必ず身に付く

発売日:2015/12/16

30のLesson形式で実践的なコードを身につける事ができます。図解もあるので大変読みやすいです。jQueryをコードを書きながら覚えたい方におすすめです。

jQuery標準デザイン講座

発売日:2013/11/26

jQueryの基本から実践をわかりやすく解説してくれる良著です。jQueryのリファレンスからそのままサイトで使えるコードを身につけることができます。

jQuery最高の教科書

スポンサードリンク

スポンサードリンク