【jQuery】属性の操作とイベント処理（２）

前回に引き続き、jQueryで記述する「属性の操作とイベント処理」について書きます。今回は、クリックするとメニューが表示・非表示されるなどのアニメーション効果を中心に紹介していきます。
以下のHTMLとCSSを用意してください。

<ul id="hover">
	<li>リスト１</li>
	<li>リスト２</li>
	<li>リスト３</li>
</ul>
<p id="p1">toggleClass</p>
<p id="p2">toggle</p>
<p id="p3">メソッドチェーン</p>
<ul>
	<!-- javascript:void(0)：リンク表示、アクションは起こさない -->
	<li><a id="a1" href="javascript:void(0)">表示・非表示</a></li>
	<li><a id="a2" href="javascript:void(0)">フェードイン・フェードアウト</a></li>
	<li><a id="a3" href="javascript:void(0)">スライドアップ・スライドダウン</a></li>
	<li><a id="a4" href="javascript:void(0)">連続エフェクト</a></li>
	<li><a id="a5" href="javascript:void(0)">fadeTo</a></li>
	<li><a id="a6" href="javascript:void(0)">toggle</a></li>
	<li><a id="a7" href="javascript:void(0)">slideToggle</a></li>
</ul>

@CHARSET "utf-8";
.caution {
	background-color:blue;
	color:fuchsia;
}
.p1 {
	background-color:green;
}
.p2 {
	color:white;
}

toggleClass：クラス属性を操作する方法

toggleClassを使うことでクラス属性を操作することができます。
id="p1"の要素をクリックすると、指定したCSSから.cautionを追加して「toggleClass」の背景と文字色を変えてみます。

$(function(){
        //toggleclass 其ノ壱
        //関数化されたtoggleClassをクリックイベント処理する
        //.clickはクリックされるたびに指定したCSSから要素を追加・削除します
    	$("#p1").click(toggleCaution);
});

//toggleClassを関数化
function toggleCaution(){
	$(this).toggleClass("caution");
}

以下の様に、関数化せずにjQueryとして記述することもできます。

$(function(){
        //toggleClass 其の弐
	$("#p1").click(function(){
		$(this).toggleClass("caution");
	});
});

処理を連続して記述できるメソッドチェーン

使いたいメソッドを「.」でつないでいくだけで、まるでレゴを組み立てるようにプログラムを記述することができます。
id="p3"の要素をメソッドチェーンを使って処理を連続して記述してみます。

$(function(){
	$("#p3").click(function(){
		$(this).toggleClass("p1").toggleClass("p2");
	});
});

toggleを使ったアニメーション効果

toggleはクリックするたびに引数の命令を交互に行います。

$(function(){
        $("#p2").toggle(addCaution,removeCaution);
});
function addCaution(){
	$("#hover li").addClass("caution");
}
function removeCaution(){
	$("#hover li").removeClass("caution");

toggleの引数の命令を交互に実行する性質を使って、リストのメニューに対してアニメーション効果を付けてみます。
文法は以下のようになります。

$("要素").toggle(
	function(){/* 実行する内容on */},
	function(){/* 実行する内容off */}
);

それでは.showと.hideを使ってリストの表示/非表示のアニメーション効果を追加してみます。

$(function(){
	$("#a1").toggle(
		//表示
		function(){
		$("#hover").show("slow")
		},
		//非表示
		function(){
		$("#hover").hide(1000)
	});
});

.fadeInと.fadeOutを使ってリストにフェードイン/フェードアウトのアニメーション効果を追加してみます。

$(function(){
	$("#a2").toggle(function(){
		//フェードイン
		$("#hover").fadeIn("slow")
	},
	function(){
		//フェードアウト
		$("#hover").fadeOut(1000)
	});
});

.slideUpと.slideDownを使ってリストにフェードイン/フェードアウトのアニメーション効果を追加してみます。

$(function(){
	$("#a3").toggle(function(){
		//スライドアップ
		$("#hover").slideUp("slow")
	},
	function(){
		//スライドダウン
		$("#hover").slideDown("1000")
	});
});

メソッドチェーンを使って連続エフェクトのアニメーション効果を追加してみます。

.toggleではなく.clickでイベント処理している点に注意してください。

$(function(){
	$("#a4").click(function(){
		//連続エフェクト
		$("#hover").slideUp("slow").fadeIn(500)
	});
});

.fadeToを使ってリストに透明度のアニメーション効果を追加してみます。

$(function(){
	$("#a5").click(function(){
		//fadeTo:透明度を設定します。(1000,0.3)は１秒間かけて透明度を0.3にします
		$("#hover").fadeTo(1000,0.3)
	});
});

.toggleを使ってリストに表示/非表示のアニメーション効果を追加してみます。

$(function(){
	$("#a6").click(function(){
		//表示/非表示
		$("#hover").toggle(1500)
	});
});

.slideToggleを使ってリストにスライド効果付きの表示/非表示のアニメーション効果を追加してみます。

$(function(){
	$("#a7").click(function(){
		//slideToggle：スライド効果付きの表示/非表示
		$("#hover").slideToggle(3000)
	});
});