メソッド fadeIn

メソッド fadeIn は、非表示の要素を不透明にしてスムーズに表示します。要素を透明にして非表示にするには、メソッド fadeOut を使用できます。

構文

指定時間（デフォルトは 400ms）での表示：

javascript.fadeIn(持続時間);

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

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

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

javascript.fadeIn();

第2パラメータとしてイージング関数、第3パラメータとしてアニメーション完了後に実行されるコールバック関数を渡すこともできます。両パラメータは任意です：

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

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

javascript.fadeIn(オプション);

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

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

例

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

html<button id="hide">隠す</button>
<button id="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">隠す</button>
<button id="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('?');
  });
});

メソッド fadeIn

構文

例

例

関連項目