第7回 Effectの制御2 – jQueryによるJavaScript入門-Re:Creator's Kansai （リクリ）

こんにちは。to-Rの西畑です。

jQueryによるJavaScript入門、第7回は前回(Effectの制御)に引き続き、様々なEffectを紹介したいと思います。

スライドによる処理

showやhideの変わりにslideDownやslideUpというメソッドを利用すればスライディングしながらの表示・非表示の切り替えができます。

$(function(){
	$("dt").toggle(function(){
		$("dd").slideDown("normal");
	},
	function(){
		$("dd").slideUp("normal");
	})
})

また、slideToggleというメソッドを利用すればパネルを開閉を一つの命令で実行できます。

$(function(){
	$("dt").click(function(){
		$("dd").slideToggle("normal");
	})
})

toggleメソッドで交互にslideDownとslideUpを実行するより、非常に簡単に記述することが可能です。

fadeInメソッド、fadeOutメソッドを利用すればフェードイン・フェードアウトによるパネルの開閉を制御できます。

$(function(){
	$("dt").toggle(function(){
		$("dd").fadeIn("normal");
	},
	function(){
		$("dd").fadeOut("normal");
	})
})

フェードイン・フェードアウトにはfadeToという関数も用意されており、要素を特定の透過度まで変更するなどの処理も可能です。

$(function(){
	$("dt").toggle(function(){
		$("dd").fadeTo("normal",0.2);
	},
	function(){
		$("dd").fadeTo("normal",1);
	})
})

fadeTo(スピード,透過率);というように指定でき、スピードは”slow”、”normal”、”fast”もしくはミリ秒で指定でき、透過率は0.2のように0（透明）から1（標準）までの少数で指定できます。