メソッド fadeTo

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

構文

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

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

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

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

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

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

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

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

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

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

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

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

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