jQuery 要素をフェードイン/フェードアウトする(fadeIn/fadeOut)

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

目次

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

fadeInメソッドとfadeOutメソッドのサンプルです。
ボタン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/1.12.4/jquery.min.js"></script>
<script>
$(function() {

	$("#button1").click(function() {
		// フェードアウト
		$("#p1").fadeOut();
		// フェードイン
		$("#p1").fadeIn();
	});
});
</script>

14行目のfadeOutメソッドでフェードアウトしながら非表示にします。
16行目のfadeInメソッドでフェードインしながら表示します。

 

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

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

テスト2

コード

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

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

<p id="p2">テスト2</p>
<input type="button" value="ボタン2" id="button2"  />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {

	$("#button2").click(function() {
		// フェードアウト
		$("#p2").fadeOut(1000);
		// フェードイン
		$("#p2").fadeIn(1000);
	});
});
</script>

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

 

fadeInメソッド

  • jQueryのfadeInメソッドです。
  • 要素をフェードインしながら表示します。不透明度(opacity)が増えて表示されます。
  • 以下はjQueryサイトのfadeInメソッドのページです。
    http://api.jquery.com/fadeIn/

fadeOutメソッド

  • jQueryのfadeOutメソッドです。
  • 要素をフェードアウトしながら非表示にします。不透明度(opacity)が減って非表示になります。
  • 以下はjQueryサイトのfadeOutメソッドのページです。
    http://api.jquery.com/fadeOut/

関連の記事

jQuery 要素を表示/非表示にする(show/hide)
jQuery 要素を表示/非表示にする(toggle)
jQuery 要素をスライドしながら表示/非表示にする(slideUp/slideDown)
jQuery 要素をスライドしながら表示/非表示にする(slideToggle)
jQuery 要素をフェードイン/フェードアウトする(fadeToggle)
jQuery アニメーションの動きを追加する(animate)

△上に戻る