メソッド fadeToggle

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

構文

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

javascript.fadeToggle(持続時間);

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

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

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

javascript.fadeToggle();

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

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

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

javascript.fadeToggle(options);

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

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

例

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

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

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

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

関連項目