メソッド fadeIn
メソッド fadeIn は、非表示の要素を不透明にしてスムーズに表示します。
要素を透明にして非表示にするには、メソッド
fadeOut を使用できます。
構文
指定時間（デフォルトは 400ms）での表示：
.fadeIn(持続時間);
時間はミリ秒だけでなく、キーワード slow (600ms) や
fast (200ms) でも指定できます。
値が大きいほどアニメーションは遅くなります：
.fadeIn('slow' または 'fast');
パラメータを指定しない場合、アニメーションは行われず、 要素は瞬時に表示されます：
.fadeIn();
第2パラメータとしてイージング関数、 第3パラメータとしてアニメーション完了後に実行されるコールバック関数を 渡すこともできます。両パラメータは任意です：
.fadeIn(持続時間, [イージング関数], [コールバック関数]);
メソッドに、キー: 値 のペアを含む JavaScriptオブジェクト形式の様々なオプションを 渡すことができます：
.fadeIn(オプション);
このようなオブジェクトは次のパラメータや関数を渡すことができます -
duration, easing, queue,
specialEasing, step, progress,
complete, start, done,
fail, always。
これらのパラメータの説明は、メソッド
animate で
確認できます。例えば、持続時間とイージング関数を設定してみましょう：
.fadeIn( {duration: 800, easing: easeInSine} );
例
次の例では、ボタン #hide をクリックすると
要素 #test がメソッド fadeOut で
非表示になり、ボタン #show では
メソッド fadeIn で表示されます。
また、速度を 1000ms に設定します：
<button id="hide">隠す</button>
<button id="show">表示</button>
<div id="test"></div>
#test {
width: 200px;
height: 200px;
background: green;
color: white;
margin-top: 10px;
}
$('#show').on('click', function() {
$('#test').fadeIn(1000);
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000);
});
例
次の例では、要素 #test の表示アニメーション終了後に
テキスト '!' のメッセージを表示し、
非表示アニメーション終了後に
テキスト '?' のメッセージを表示します：
<button id="hide">隠す</button>
<button id="show">表示</button>
<div id="test"></div>
#test {
width: 200px;
height: 200px;
background: green;
color: white;
margin-top: 10px;
}
$('#show').on('click', function() {
$('#test').fadeIn(1000, function() {
alert('!');
});
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000, function() {
alert('?');
});
});
