デモページはこちら

jQueryで要素を表示・非表示にするメソッドのまとめです。対象要素を表示するshow、対象要素を非表示にするhide、対象要素の表示・非表示を切り替えるtoggle、対象要素をフェードインで表示するfadeIn、対象要素をフェードアウトで非表示にするfadeOut、対象要素をフェードイン・フェードアウトで表示・非表示を切り替えるfadeToggle、対象要素をスライドで表示するslideDown、対象要素をスライドで非表示にするslideUp、対象要素をスライドで表示・非表示を切り替えるslideToggleです。

以下のhtmlの構造でテストします。

<p class="title">show・hide・toggle・fadeIn・fadeOut・fadeToggle</p>
<div class="photo01"><img src="images/photo01.jpg" alt=""></div>
<input type="button" class="btn01" value="show">
<input type="button" class="btn02" value="hide">
<input type="button" class="btn03" value="toggle"><br><br>
<input type="button" class="btn04" value="fadeIn">
<input type="button" class="btn05" value="fadeOut">
<input type="button" class="btn06" value="fadeToggle"><br><br>
<input type="button" class="btn07" value="slideDown">
<input type="button" class="btn08" value="slideUp">
<input type="button" class="btn09" value="slideToggle">

ボタンクリック時に画像を表示・非表示します。非表示の動作は対象要素にdisplay: none;を適用するため表示領域がなくなります。表示の動作は対象要素に適用されたdisplay: none;を削除します。フェードアウトの動作は対象要素のopacityを操作しますが、最終的にはdisplay: none;を適用します。フェードインでは対象要素のdisplay: none;削除後、opacityを操作します。slideUpの動作は対象要素のheightを操作しますが、最終的にはdisplay: none;を適用します。slideDownでは対象要素のdisplay: none;削除後、heightを操作します。

$(function() {
	$('.btn01').on('click', function() {
		$('.photo01 img').show();
	});
	$('.btn02').on('click', function() {
		$('.photo01 img').hide();
	});
	$('.btn03').on('click', function() {
		$('.photo01 img').toggle();
	});
	$('.btn04').on('click', function() {
		$('.photo01 img').fadeIn();
	});
	$('.btn05').on('click', function() {
		$('.photo01 img').fadeOut();
	});
	$('.btn06').on('click', function() {
		$('.photo01 img').fadeToggle();
	});
	$('.btn07').on('click', function() {
		$('.photo01').slideDown();
	});
	$('.btn08').on('click', function() {
		$('.photo01').slideUp();
	});
	$('.btn09').on('click', function() {
		$('.photo01').slideToggle();
	});
});

次に以下のhtml構造で表示要素をフェードインします。

<p class="title">表示要素をfadeIn（第一引数で速度を指定）</p>
<div class="photo02"><img src="images/photo02.jpg" alt=""></div>
<input type="button" class="btn10" value="第1引数なし（400ミリ秒）">
<input type="button" class="btn11" value="第1引数:slow（600ミリ秒）">
<input type="button" class="btn12" value="第1引数:fast（200ミリ秒）"><br><br>
<p class="title">表示要素をfadeIn（第二引数で関数を指定）</p>
<div class="photo03"><img src="images/photo03.jpg" alt=""></div>
<input type="button" class="btn13" value="第1引数:3000ミリ秒">

fadeInはdisplay: none;の要素にしか適用できないためhideメソッドで非表示にしてからフェードインします。fadeInに引数を指定しない場合、第一引数はnormal（400ミリ秒）、第二引数はswingが適用されます。第一引数はslow、fastの他、ミリ秒を直接指定することができます。第二引数で関数を指定した場合、フェードインの動作完了後の実行になります。

$(function() {
	$('.btn10').on('click', function() {
		$('.photo02').hide().fadeIn();
	});
	$('.btn11').on('click', function() {
		$('.photo02').hide().fadeIn('slow');
	});
	$('.btn12').on('click', function() {
		$('.photo02').hide().fadeIn('fast');
	});
	$('.btn13').on('click', function() {
		$('.photo03').hide().fadeIn(3000, function() {
			console.log('フェードイン完了');
		});
	});
});