ywork2020.com

Title

要素の透過率をアニメーションで調整する

目次 (INDEX)

fadeTo とは

ここで説明する fadeTo とは次の語句からなる jQuery のメソッドです。
fade
読み: フェード
意味: 衰える、しぼむ、しおれる、次第に消えていく、薄れる、あせていく
to
読み: トゥ
意味: ～に。 行先や方向性を表す不定詞。

目次に戻る

fadeTo メソッドの概要

このメソッドは、呼び出し元要素の透過率をアニメーションをもって変化させます。

fade とは 「 色が あせる 」、「 花が しぼむ 」などの様を意味とした単語です。
これを単純にいうと 「 徐々に消えゆく様 」 というと解りやすいと思います。

この fadeTo() は 要素の透過率を調整して アニメーションによるフェードイン、フェードアウトを実現することができるメソッドです。

透過率 100% は完全に可視できる状態を表しています。また、0% で可視できない状態を表します。
別の表現で例えるならば、100% は透明なガラスをフィルターにしてものを見ている状態であり、透過率が下がっていくほど、透過し難い すりガラス をフィルターにして透過率を調整しているようなものです。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

  • duration: アニメーションが開始してから終了するまでに掛かる時間をミリ秒の単位の数値か文字で設定します。
  • opacity: 透過率です。1 から 0 までの小数点を含む実数値で指定します。 100% の可視状態を 1 とします。 また 0% を不可視状態とし 0 とします。
  • easing: アニメーションの加速タイプをキーワードや関数で指定します。(よく利用されるキーワード値: "swing" , "linear")
  • complete: アニメーションの終了時に実行される関数を指定します。
$(Selector).fadeTo(duration, opacity [, complete]);
$(Selector).fadeTo(duration, opacity [, easing] [, complete]);

目次に戻る

サンプルコードと実行結果

ここでは、fadeTo() の全ての引数を満たした形でアニメーションを実行してみます。

構文を見れば分かると思いますが、最低限の引数として duration と opacity は必要です。 easing と complete は必要があれば設定すれば良いのですが、ここでは全ての引数を使ってみたいと思います。

サンプルコード: CSS 
<style>
	#idOutput{
		background-color: ##lightpink;
		border: thin solid ##gray;
		font-size: 150%;
		padding: 1em;
		width: fit-content;
	}
</style>
サンプルコード: HTML 
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
	<output id="idOutput"> Element </output>
	<script>...</script>
</body>
  • 06: output id="idOutput" (出力要素です。 識別子に idOutput を設定しています。)
サンプルコード: script 
<script>
	$("#idOutput").mouseenter(function(){
		$(this).fadeTo(900, 0.3, "swing", function(){
			$(this).css("background-color", "##lightblue");
		});
	});
	$("#idOutput").mouseleave(function(){
		$(this).fadeTo(400, 1.0, "linear", function(){
			$(this).css("background-color", "##lightpink");
		});
	});
</script>
  • 02-06: $("#idOutput").mouseenter(function(){ 処理 }) (idOutput の要素にマウスポインターが乗ると { 処理 } の部分が実行されます。)
  • 03-05: $(this).fadeTo(900, 0.3, "swing", function(){ 処理 }) (要素の透過率をアニメーションで調整しています。設定としては 現状から 900ミリ秒掛けて 透過率を 30% に変更します。またアニメーション完了時には関数で要素の背景色をライトブルーに変更しています。)
  • 07-11: $("#idOutput").mouseleave(function(){ 処理 }) (idOutput の要素からマウスポインターが外れると { 処理 } の部分が実行されます。)
  • 08-10: $(this).fadeTo(400, 1.0, "linear", function(){ 処理 }) (要素の透過率をアニメーションで調整しています。設定としては 現状から 900ミリ秒掛けて 透過率を 30% に変更します。またアニメーション完了時には関数で要素の背景色をライトブルーに変更しています。)
実行結果:
Element

サンプルにマウスポインターを乗せたり、外したりしてみてください。 また、モバイルのタッチパネルの場合は、サンプルをクリックしたり別の場所をクリックすることと同じです。

目次に戻る