jQuery fadeToggle フェードイン/フェードアウト

jQueryの要素をフェードイン/フェードアウトするサンプルです。
fadeToggleメソッドを使用します。

目次

サンプル fadeToggleメソッド
  フェードイン/フェードアウトする
  フェードイン/フェードアウトの秒数を設定する

fadeToggleメソッド

.fadeToggle( [duration ] [, easing ] [, complete ] )
  • jQueryのfadeToggleメソッドです。
  • 要素が表示のとき、フェードアウトしながら非表示にします。不透明度(opacity)が減って非表示になります。
  • 要素が非表示の時、フェードインしながら表示します。不透明度(opacity)が増えて表示されます。
  • 以下はjQueryサイトのfadeToggleメソッドのページです。
    http://api.jquery.com/fadeToggle/

フェードイン/フェードアウトする

fadeToggleメソッドのサンプルです。
ボタン1を押すとフェードアウトしながらP要素の文字を非表示にした後、フェードインしながらP要素の文字を表示します。

テスト1

 

上記サンプルのコードです。

<style>
p {background-color:PaleTurquoise;}
</style>

<p id="p1">テスト1</p>
<input type="button" value="ボタン1" id="button1"  />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("#button1").click(function() {
		// フェードアウト
		$("#p1").fadeToggle();
		// フェードイン
		$("#p1").fadeToggle();
	});

</script>

13行目のfadeToggleメソッドは、要素が表示のとき、フェードアウトしながら非表示にします。
15行目のfadeToggleメソッドは、要素が非表示のとき、フェードインしながら表示します。

フェードイン/フェードアウトの秒数を設定する

フェードイン/フェードアウトの秒数を設定するサンプルです。
ボタン2を押すと1秒かけてフェードアウトし1秒かけてフェードインします。

テスト2

 

上記サンプルのコードです。

<style>
p {background-color:PaleTurquoise;}
</style>

<p id="p1">テスト1</p>
<input type="button" value="ボタン1" id="button1"  />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("#button1").click(function() {
		// フェードアウト
		$("#p1").fadeToggle(1000);
		// フェードイン
		$("#p1").fadeToggle(1000);
	});

</script>

13,15行目は、1秒(1000ミリ秒)かけてフェードアウト/フェードインにします。設定する単位はミリ秒です。

関連の記事

jQuery show/hide 要素を表示/非表示にする
jQuery toggle 要素を表示/非表示にする
jQuery slideUp/slideDown スライドで表示/非表示
jQuery fadeIn/fadeOut フェードイン/フェードアウト
jQuery animate 要素をアニメーションで動かす

△上に戻る