ywork2020.com

Title

表示中の要素をアニメーションで非表示にする

目次 (INDEX)

fadeOutとは

ここで説明する fadeOut とは次の語句からなるjQueryのメソッドです。
fade
読み: フェード
意味: 色あせる、衰える、消えてゆく
out
読み: アウト
意味: 外に、外出、不在

目次に戻る

fadeOutメソッドの概要

このメソッドは、アニメーションを伴う要素の非表示化を提供します。

アニメーションの種類は、要素の透過度を変化させるものです。

目次に戻る

構文

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

  • duration: フェードアニメーションに費やす時間をミリ秒単位で指定します。(default: 400)
  • complete: アニメーションの完了時に実行される関数を指定します。
  • easing: アニメーションのスピードタイプを定型句で指定します。(default: swing)
  • options: アニメーションの各種オプションを PlainObject として指定します。
$(Selector).fadeOut([duration] [, complete]);
$(Selector).fadeOut([duration] [, easing] [, complete]);	
$(Selector).fadeOut(options);

目次に戻る

サンプルコードと実行結果 .fadeOut([duration] [, complete])

ここでは、構文の .fadeOut([duration] [, complete]) を使って div 要素をアニメーションさせてみます。

サンプルコード: CSS
<style>
	#idDiv{
		background-color: ##lightpink;
		border: thin solid ##lightgray;
		padding: 1em;
		height: 120px;
		width: 120px;
	}
</style>
サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div id="idDiv">Element</div>
	<button id="idButton">run fadeOut()</button>
	<script>...</script>
</body>
  • 06: div id="idDiv" (アニメーションのサンプルになる要素です。)
  • 07: button id="idButton" (アニメーションを実行するためのボタンです。)
サンプルコード: script
<script>
	$("#idButton").click(function(){
		$("#idDiv").fadeOut(800, funcReset);
	});
	let funcReset = function(){
		$("#idDiv").fadeIn(0);
	};
</script>
  • 02-04: $("#idButton").click(function(){関数の処理}) (idButton の要素にクリックイベントをバインドして関数をアタッチしています。)
  • 03: $("#idDiv").fadeOut(800, funcReset) (idDiv の要素を所要時間 0.8 秒掛けてフェードアウトします。完了後には 05:行目からの funcReset 関数を実行します。)
  • 05-07: funcReset (アニメーションの後に表示をリセットするための自作関数です。)
  • 06: $("#idDiv").fadeIn(0) (fadeIn() は、fadeOut() の逆の動作をするメソッドです。これを使ってリセットを実現しています。)
実行結果:
Element

目次に戻る

サンプルコードと実行結果 .fadeOut(options)

ここでは、構文の .fadeOut(options) を使って div 要素をアニメーションさせてみます。

サンプルコード: CSS
<style>
	#idDiv{
		background-color: ##lightblue;
		border: thin solid ##lightgray;
		padding: 1em;
		height: 120px;
		width: 120px;
	}
</style>
サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div id="idDiv">Element</div>
	<button id="idButton">run fadeOut()</button>
	<script>...</script>
</body>
  • 06: div id="idDiv" (アニメーションのサンプルになる要素です。)
  • 07: button id="idButton" (アニメーションを実行するためのボタンです。)
サンプルコード: script
<script>
	let objOptions = new Object();
	objOptions.duration = 1200;
	objOptions.easing = "linear";
	objOptions.complete = function(){
		$("#idDiv").fadeIn(0);
	};
	$("#idButton").click(function(){
		$("#idDiv").fadeOut(objOptions);
	});
</script>
  • 02: let objOptions = new Object() (objOptions という名前で新しいオブジェクトを定義しています。)
  • 03: objOptions.duration = 1200 (オブジェクトの duration プロパティに 1200 を代入しています。)
  • 04: objOptions.easing = "linear" (オブジェクトの easing プロパティに "linear" を代入しています。)
  • 05-07: objOptions.complete = function(){関数の処理} (オブジェクトの complete プロパティに関数を代入しています。アニメーションの後に表示をリセットするための関数です。)
  • 06: $("#idDiv").fadeIn(0) (fadeIn() は、fadeOut() の逆の動作をするメソッドです。これを使ってリセットを実現しています。)
  • 08-10: $("#idButton").click(function(){関数の処理}) (idButton の要素にクリックイベントをバインドして関数をアタッチしています。)
  • 09: $("#idDiv").fadeOut(objOptions) (idDiv の要素を objOptions の設定に基づいてフェードアウトします。)
実行結果:
Element

目次に戻る

構文の options について

前のセクションでサンプルを示していますが、構文の options は オブジェクト、またはオブジェクト型で指定します。 以下にオブジェクトのプロパティをリストとして記載します。

  • always:
    アニメーションの終了した時に実行される関数を指定します。
  • complete:
    アニメーションの完了時に実行される関数を指定します。
  • done:
    アニメーションが正常終了した時に実行される関数を指定します。
  • duration:
    アニメーション周期の開始から終了までの時間をミリ秒単位で指定します。
    (default: 400)
  • easing:
    アニメーションの加速タイプをキーワードで指定します。
    (default: swing)
  • fail:
    アニメーションが異常終了した時 (stop 等) に実行される関数を指定します。
  • progress:
    アニメーション周期の期間中に継続して実行される関数を指定します。
  • queue:
    アニメーションをキューに追加するか否かを true か false で指定します。
    (default: true)
  • specialEasing:
    CSSプロパティ毎に固有の easing を設定します。
  • start:
    アニメーションの開始時に実行実行される関数を指定します。
  • step:
    アニメーション周期の期間中に変化していくプロパティ値を元にして実行されるコールバック関数を指定します。
    step = function(now, fx){}

目次に戻る