fadeOutメソッド
fadeOutメソッドは要素をフェードアウトで非表示にします。
要素を表示するには、fadeInメソッドを使用して不透明にします。
構文
指定時間（デフォルトは400ms）で非表示にします：
.fadeOut(duration);
時間はミリ秒だけでなく、キーワードslow（600ms）やfast（200ms）でも指定できます。値が大きいほどアニメーションは遅くなります：
.fadeOut('slow' or 'fast');
パラメータを指定しない場合、アニメーションは行われず、要素は即座に非表示になります：
.fadeOut();
2番目のパラメータとしてイージング関数、3番目のパラメータとしてアニメーション完了後に実行されるコールバック関数を渡すこともできます。どちらのパラメータもオプションです：
.fadeOut(duration, [easing function], [callback function]);
JavaScriptオブジェクト（キー: 値のペアを含む）の形式でさまざまなオプションをメソッドに渡すことができます：
.fadeOut(options);
このようなオブジェクトは、duration、easing、
queue、specialEasing、step、
progress、complete、start、
done、fail、alwaysなどのパラメータや関数を渡すことができます。
これらのパラメータの説明は、animateメソッドで確認できます。例えば、
継続時間とイージング関数を設定します：
.fadeOut( {duration: 800, easing: easeInSine} );
例
次の例では、ボタン#hideをクリックすると、
fadeOutメソッドを使用して#test要素が非表示になり、
ボタン#showをクリックするとfadeInを使用して表示されます。
また、速度を1000msに設定します：
<button id="hide">hide</button>
<button id="show">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">hide</button>
<button id="show">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('?');
});
});
