第7回 Effectの制御2 – jQueryによるJavaScript入門

こんにちは。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(標準)までの少数で指定できます。

【PR】書籍 現場のプロから学ぶXHTML+CSS 好評発売中

コメント / トラックバック 1 件

この記事へのコメント・トラックバックを追いかけることができます。(RSS 2.0

コメントをどうぞ

トラックバック URL

トラックバック

  1. […] 第7回 Effectの制御2 – jQueryによるJavaScript入門-Re:Creator’s Kansai (tags: jquery) […]