ywork2020.com

Title

アニメーションで要素の表示と非表示を切り替える

目次 (INDEX)

fadeToggleとは

ここで説明する fadeToggle とは次の語句からなるjQueryのメソッドです。
fade
読み: フェード
意味: 色あせる、衰える、消えてゆく
toggle
読み: トグル
意味: スイッチ機構の一種、一つのボタンで二つの状態を切り替えるもの

目次に戻る

fadeToggleメソッドの概要

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

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

これは、 非表示の要素に fadeIn() を実行し、 表示中の要素に fadeOut() を実行するのと変わりません。

目次に戻る

構文

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

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

目次に戻る

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

ここでは、このメソッドの基本的な動作を確認するために、.fadeToggle(duration , easing) の構文形式を使って div 要素をアニメーションさせてみます。

このメソッドは fadeIn()fadeOut() メソッドを交互的に実行するので、他の構文形式については、そちらのページも参照してください。

サンプルコード: 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>
	<button id="idButton">run fadeToggle()</button>
	<div id="idDiv">Element</div>
	<script>...</script>
</body>
  • 06: button id="idButton" (アニメーションを実行するためのボタンです。)
  • 07: div id="idDiv" (アニメーションのサンプルになる要素です。)
サンプルコード: script
<script>
	$("#idButton").click(function(){
		$("#idDiv").fadeToggle(800, "swing");
	});
</script>
  • 02-04: $("#idButton").click(function(){関数の処理}) (idButton の要素にクリックイベントをバインドして関数をアタッチしています。)
  • 03: $("#idDiv").fadeToggle(800, "swing") (idDiv の要素を所要時間 0.8 秒掛けてアニメーションします。)
実行結果:
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){}

目次に戻る