ドーナツ本出版記念セミナー終了しました

4月26日にサイバーガーデンbiz主催で『Web制作の現場で使う jQueryデザイン入門』出版記念のjQueryセミナーを行いました。

セミナーにご参加いただいた方ありがとうございました。

出版記念セミナーなのにWeb制作の現場で使う jQueryデザイン入門(ドーナツ本)が入手しづらい状況が続いてしまって申し訳ございません。

現在、ネットショップですと紀伊國屋書店BookWebジュンク堂書店でご購入いただけます。他のネットショップにも出荷はしているらしいので、もうすぐ購入できる状況になるかと思います。

2010年5月15日(土曜日)のjQuery 初級講座 東京は、まだ余裕がありますので興味がありましたらご検討よろしくお願いいたします。

セミナー中にいただいた質問

セミナー中にご回答できなかった質問に、この場を借りてご回答させていただきます(結構長いですスミマセン)。

セミナー中で紹介したアコーディオンパネル

これのソースでは、

$(function(){
	$("dd:not(:first)").css("display","none");
	$("dl dt").click(function(){
		if($("+dd",this).css("display")=="none"){
			$("dd").slideUp("slow");
			$("+dd",this).slideDown("slow");
		}
	})
});

という風にslideUpとslideDownを同時に行っているが、これをslideUpが終わった後にslideDownを実行したいのですが出来ますか?という質問でした。

アニメーションが終わった後に実行したい命令は基本的にはアニメーションのコールバック関数の中に記述していきます。

$(セレクター).slideUp("slow",function(){
	//ここにslideUpアニメーションが終わった後の命令を記述
});

例えば次のように記述すると

$(function(){
	$("dd:not(:first)").css("display","none");
	$("dl dt:nth-child(3)").click(function(){
		$("dd:nth-child(2)").slideUp("slow",function(){
			$("dd:nth-child(4)").slideDown("slow");
		});
	})
});

Step.2のラベルがクリックされた場合、Step.1のパネルがslideUpし非表示になり、その後にStep.2のパネルがslideDownして表示されます。(1度しか実行されないのでリロードしてください。)

サンプル

ただし、これを利用してアコーディオンのslideDownをコールバック関数にいれても正しく動作しません。

$(function(){
	$("dd:not(:first)").css("display","none");
	$("dl dt").click(function(){
		if($("+dd",this).css("display")=="none"){
			$("dd").slideUp("slow",function(){
				$("+dd",this).slideDown("slow");
			});
		}
	})
});

サンプル

通常click(function(){...})ではクリックされた要素をthisとして取得できますが、slideUp("slow",function(){...})内ではthisはスライドアップしている要素として意味が変わっています。その為、$("+dd",this).slideDown("slow");がコールバック関数に入れる前と意味が変わってしまった為、動作しないわけです。

それを回避する為、次のように記述します。

$(function(){
	$("dd:not(:first)").css("display","none");
	$("dl dt").click(function(){
		var click = this;
		if($("+dd",this).css("display")=="none"){
			$("dd").slideUp("slow",function(){
				$("+dd",click).slideDown("slow");
			});
		}
	})
});

クリックされた要素であるthisを一度変数「click」に入れ、コールバック関数内ではthisの変わりに「click」を利用します。ただし、これだけではまだ正常に動作しません。

サンプル4

次の原因はslideUpイベントです。

$("dd").slideUp("slow",function(){
	$("+dd",click).slideDown("slow");
});

今回、HTML上にはdd要素が3個あり、slideUpアニメーションが3回実行されます。(ただ実際にアニメーションが起こるのは現在開いているパネルのみ)。その為、コールバック関数に書かれているslideDownアニメーションも3回実行されます。

$(function(){
	$("dd:not(:first)").css("display","none");
	$("dl dt").click(function(){
		var click = this;
		if($("+dd",this).css("display")=="none"){
			$("dd:visible").slideUp("slow",function(){
				$("+dd",click).slideDown("slow");
			});
		}
	})
});

SlideUpアニメーションが1回のみ実行されるように変更します。

これで目的どおり動作します。

サンプル5

アニメーションが終わった後に別のアニメーションを実行というのは簡単なのですが、thisなどを利用していると複雑になるので注意が必要です。

スポンサードリンク

«CSS Nite LP, Disk 9.2(reprise)に出演します | メイン | 著作権について by CSS Nite in Ginza, Vol.47»