jQuery入門講座使い方-スライド処理

スライド処理

時間を指定して要素の高さを変更する

サンプル（03/02_01.html）を開いて下さい。ボタン用のdivが２つ配置され、クリックイベントでslideUpメソッドやslideDownメソッドが実行されるようにしてあります。サンプルでは引数としてミリ秒（サンプルでは500なので0.5秒）を設定していますが、fadeInメソッドと同じように省略しても機能します。

$("#slideUp").click(function(){
	$("#targetDiv").slideUp(500);
});			
$("#slidedown").click(function(){
	$("#targetDiv").slideDown(500);
});

実際にボタン用のdivをクリックして機能を確認してみましょう。slideUpメソッドはセレクタで指定した要素の高さを小さくして消し、slideDownメソッドは要素本来の高さに戻す処理です。

slideToggleメソッド

fadeToggleメソッドと同じように、スライド処理にもsslideToggleメソッドがあります。対象が消えているときはslideDownを実行して表示し、消えていないときはslideUpを実行して消します。
サンプル（03/02_02.html）を開いて下さい。fadeToggleメソッド同様に便利だと思うので覚えておきましょう。サンプルでは時間指定（500）がされていますが省略できます。

$("#buttonDiv").click(function(){
	$("#targetDiv").slideToggle(500);
});

スライド型の演出もフェードの演出のように要素自体が無くなりますが、フェードと異なりエリアを固定しなくても違和感がありません。サンプル（03/02_03.html）を開いて下さい。ターゲットとなるdivの下に青いデザインを追加して、青いdivが開閉するような演出を実現しています。

アニメ無しでの表示と非表示

フェードやスライドのようなアニメをせず、瞬時に要素を消したり表示する場合にはhideメソッドとshowメソッドを利用します。サンプル（03/02_04.html）を開いて下さい。hideボタンとshowボタンが配置され、クリックするとオレンジのdiv要素を消したり表示したりできます。

$("#hide").click(function(){
	$("#targetDiv").hide();
});	
$("#show").click(function(){
	$("#targetDiv").show();
});

hideメソッドとshowメソッドのポイントは、引数に何も設定しないことです。引数にミリ秒を設定することもできるのですが、設定した場合はサンプル（03/02_05.html）のように「縮小しながらフェードアウト/拡大しながらフェードアウト」という過剰で使いどころがなさそうなアニメになってしまいます。

またfadeToggleやslideToggleと同じように、show/hideにもトグル機能をもったtoggleメソッドがあります。これも使い勝手が良いので覚えておきましょう。サンプル（03/02_06.html）を確認してください。対象が消えているときはshowを実行して表示し、表示されているときはhideを実行して消します。

$("#buttonDiv").click(function(){
	$("#targetDiv").toggle();
});

このようにフェードやスライド処理を簡単に実行できるところが、jQueryがデザイナーにも指示される理由なのかもしれません。

スライドの使いどころ

スライド型の演出はjQueryのver1.0から存在し、jQueryが使われ出した頃に企業のサイトでも見かけることがありました（アコーディオンメニューなど）。しかし現在ではスライド型の演出が利用されていることをあまり見かけないのではないでしょうか？スライドは機能的には面白いのですが、ユーザビリティ上あまり良くないので敬遠されたのだと思います。

スライドを演出に利用する場合、クリックするとコンテンツを表示するようなものが多かったと思います。別に最初に隠す必要はなく、始めから表示しておけばよいのに、情報を得るために利用者に余分な操作を求めるのユーザビリティ上、好ましくありません。このことを踏まえて、必要以上にスライドをを利用しない（コンテンツを隠さない）ようにしましょう。

次はthisと合わせて利用すると便利なトラバージングという仕組みを紹介します。

次のページ：thisから辿る