jquery：fadeTo()

このメソッドの説明

fadeTo() はjQueryメソッドです。

要素にCSSのopacity(不透明度)プロパティを変化させるアニメーションを行います。

メソッド

セレクタ.fadeTo( duration , opacity , complete )

パラメータ

duration (整数)

フェードするアニメーション時間(ms)を指定します。

初期値：400ms

指定方法は下記の文字列でも可

・'slow'    :600ms

・'normal':400ms

・'fast'    :200ms

opacity (数値)

変化させる不透明度を0～1の値で指定します。

complete (関数)（省略可）

.fadeTo()終了後に実行する関数

利用例

下記の画像にカーソルをONさせて下さい。画像の透明度が変化します。

上記は下記のプログラムから構成されています。

<div class='fadeto_target'>
	<img class='img_item' src='https://hnw.t-spirits.com/school/wp-content/uploads/2020/12/crown.jpg' alt='img1'>
	<img class='img_item' src='https://hnw.t-spirits.com/school/wp-content/uploads/2020/12/alphard.jpg' alt='img2'>
	<img class='img_item' src='https://hnw.t-spirits.com/school/wp-content/uploads/2020/12/86.jpg' alt='img3'>
</div>
<style>
	.fadeto_target{display:flex;width:100%;}
	.img_item{width:33%;opacity:0.5;}
</style>
<script>
	$(function(){
		var opa = $('.img_item').css('opacity');
		$('.fadeto_target').children().hover(
			function(){$(this).fadeTo(0,1);},  // カーソルがONした時の処理
			function(){$(this).fadeTo(0,opa);}// カーソルが外れた時の処理
		);
	});
</script>

■8行目

初期の画像の不透明度は0.5にしています。

■12行目

ドキュメントが読み込まれた時に上記の不透明度を変数opaにセットします。

■14行目

カーソルが画像にONした時に0秒で不透明度を1に変化させます。

■15行目

カーソルが画像から離れた時は、0秒で不透明度を元に戻します。

■opacity制御を行う時の注意点