jQueryによるJavaScript入門、第6回はライブラリを利用する、非常に大きなメリットとして上げられるEffectの制御について解説したいと思います。

Effectとは何か?百聞は一見にしかず、ということでサンプルをご覧ください。

Effectのサンプル

前回のtoggleクリックの制御のサンプルを少し改造したものになりますが、パネル部分の表示非表示が切り替わる際に、少し派手目の動きをしながら切り替わります。

これをJavaScriptで書こうとすれば、かなりの知識が必要になりますがjQueryですと1行書き換えるだけで簡単に実装することが可能です。

これまではパネルなどを表示する際は

$("dd").css("display","block");

を利用してCSSのdisplayプロパティを変更していましたが、Effectを利用する場合は、以下のように記述します。

$("dd").show("slow");

showメソッドを利用します。

showメソッドはdisplayがnoneの要素のdisplayをblockに変更すると言う命令ですが、その際にshow(速度)と言う形で、速度を指定できます。

サンプルではslowを指定していますが、他にも”normal”、”fast”なども指定できます。

他にもミリ秒でも指定できます。

ミリ秒のサンプル

サンプルでは5000ミリ秒、つまり5秒かけてパネルを表示する設定を行っております。

非表示する際は、

$("dd").hide("slow");

のようにhideメソッドを利用します。

次回は、様々なjQueryのEffectをご紹介したいと思います。

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