fadeOutメソッド

fadeOutメソッドは要素をフェードアウトで非表示にします。 要素を表示するには、fadeInメソッドを使用して不透明にします。

構文

指定時間（デフォルトは400ms）で非表示にします：

javascript.fadeOut(duration);

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

javascript.fadeOut('slow' or 'fast');

パラメータを指定しない場合、アニメーションは行われず、要素は即座に非表示になります：

javascript.fadeOut();

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

javascript.fadeOut(duration, [easing function], [callback function]);

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

javascript.fadeOut(options);

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

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

例

次の例では、ボタン#hideをクリックすると、 fadeOutメソッドを使用して#test要素が非表示になり、 ボタン#showをクリックするとfadeInを使用して表示されます。 また、速度を1000msに設定します：

html<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>

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

javascript$('#show').on('click', function() {
  $('#test').fadeIn(1000);
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000);
});

例

次の例では、#test要素の表示アニメーション終了後に テキスト'!'のメッセージを表示し、 非表示アニメーション終了後にテキスト'?'のメッセージを表示します：

html<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>

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

javascript$('#show').on('click', function() {
  $('#test').fadeIn(1000, function() {
    alert('!');
  });
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000, function() {
    alert('?');
  });
});

関連項目