jQuery入門 | エフェクト効果 | スライド効果 .slideUp() .slideDown() .slideToggle()

スライド効果

jQueryでのスライド効果は、該当要素のCSS heightプロパティ値をすばやく変更して表現する。このスライド効果を表現するために使われるメソッドは次の通りである。

.slideUp()メソッド - スライドアップ

.slideUp()メソッドは、選択した要素が徐々に上がりながら消える効果を表示する。

次の例は、idが"divBox1"である要素を上がりながら消す。

$("#divBox1").slideUp(); // 引数を指定しない場合、400 ms、つまり0.4秒かけて上がりながら消える。

引数にミリ秒に相当する数値を指定して、スライド効果の速度を調整することもできる。

$("#divBox2").slideUp(500); // idが"divBox2"である要素を0.5秒かけて上がりながら消す。

または、"slow"、"fast"などの予約語を指定して、スライド効果の速度を調整することもできる。

$("#divBox3").slideUp("fast");   

コードを実行

.slideDown()メソッド - スライドダウン

.slideDown()メソッドは、選択した要素が徐々に下がりながら表示される効果を表示する。

次の例は、idが"divBox1"である要素を下がりながら表示する。

$("#divBox1").slideDown(); // 引数を指定しない場合、0.4秒、つまり400 msかけて下がりながら表示する。

引数にミリ秒に相当する数値を指定して、スライド効果の速度を調整することもできる。

$("#divBox2").slideDown(500); // idが"divBox2"である要素を0.5秒かけて下がりながら表示する。

または、"slow"、"fast"などの予約語を指定して、スライド効果の速度を調整することもできる。

$("#divBox3").slideDown("fast");   

コードを実行

.slideToggle()メソッド - スライドトグル

jQueryでは、選択した要素の現在の表示状態に応じて異なる動作をする.slideToggle()メソッドを使用できる。選択した要素が現在消えている状態であれば.slideDown()メソッドの動作を実行し、表示されている状態であれば.slideUp()メソッドの動作を実行する。

$("#divBox1").slideToggle(); 
$("#divBox2").slideToggle(500); // idが"divBox2"である要素を0.5秒かけて上がりながら消す、または下がりながら表示する。
$("#divBox3").slideToggle("fast"); // idが"divBox3"である要素をすばやく上がりながら消す、または下がりながら表示する。

コードを実行