メソッド fadeTo

メソッド fadeTo は要素の 不透明度 を指定した値まで滑らかに変更します。範囲は 0 から 1 です。

構文

メソッド使用時には、持続時間と不透明度を指定する必要があります。 デフォルトの 400ms で指定した時間内に不透明度を変更します：

javascript.fadeTo(持続時間, 不透明度の値);

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

javascript.fadeTo('slow' または 'fast', 不透明度の値);

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

javascript.fadeTo(持続時間, 不透明度の値, [コールバック関数]);

イージング関数とコールバック関数（オプションパラメータ）を渡すこともできます。アニメーション完了後に実行されます：

javascript.fadeTo(持続時間, 不透明度の値, [イージング関数], [コールバック関数]);

例

次の例では、メソッド fadeTo を使用して、 ボタン #hide をクリックすると #test 要素の不透明度が 0.5 まで減少して隠れ、 ボタン #show をクリックすると表示されます：

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').fadeTo(1000, 1);
});

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

関連項目