こんばんは。トゥーアールの西畑です。
jQueryによるJavaScript入門、第6回はライブラリを利用する、非常に大きなメリットとして上げられる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をご紹介したいと思います。