メソッド fadeToggle

メソッド fadeToggle は、要素の不透明度をアニメーションさせながら、交互にフェードインで表示したりフェードアウトで非表示にしたりします。

構文

表示/非表示を指定時間で実行（デフォルトは 400ms）：

.fadeToggle(持続時間);

時間はミリ秒だけでなく、キーワード slow（600ms）および fast（200ms）でも指定できます。値が大きいほどアニメーションは遅くなります：

.fadeToggle('slow' または 'fast');

パラメータを指定しない場合、アニメーションはなく、要素は瞬時に表示/非表示になります：

.fadeToggle();

2番目のパラメータとしてイージング関数、3番目のパラメータとしてコールバック関数（アニメーション完了後に実行）を渡すこともできます。両方のパラメータはオプションです：

.fadeToggle(持続時間, [イージング関数], [コールバック関数]);

JavaScriptオブジェクト（キー: 値のペアを含む）の形式で、メソッドにさまざまなオプションを渡せます：

.fadeToggle(options);

このようなオブジェクトは、以下のパラメータと関数を渡すことができます - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always。これらのパラメータの説明は、メソッド animate で確認できます。例えば、持続時間とイージング関数を設定します：

.fadeToggle( {duration: 800, easing: easeInSine} );

例

次の例では、ボタン #toggle を初めてクリックすると、 #test の要素が非表示になり、もう一度クリックすると表示されます。このために、メソッド fadeToggle を使用します。また、速度を 1000ms、イージング関数の値を linear に設定します：

<button id="toggle">toggle</button>
<div id="test"></div>

#test {
	width: 200px;
	height: 200px;
	background: green;
	color: white;
	margin-top: 10px;
}

$('#toggle').on('click', function() {
	$('#test').fadeToggle(1000, 'linear');
});

メソッド fadeToggle

構文

例

関連項目