jQuery基本チュートリアル

jQuery効果

slideDown()メソッドは選択された要素をスライドダウン表示します。

注意：このメソッドはjQueryメソッドで隠された要素、およびCSSのdisplay:none（visibility:hiddenではありません）に適しています。

このメソッドは通常、slideUp()方法を一緒に使用します。

$selector).slideDown(duration,　easing,　callback)

「#my-Div”をクリックすると、この例ではページ上に「.panel」を表示します：

例

$("#my-Div").click(function(){
　　$(".panel").slideDown();
});

ボタンをクリックしたとき、すべての<p>要素をスライドダウンさせます：

例

$("button").click(function(){
　　$("p").slideDown();
});

使用durationパラメータ：

例

$("button").click(function(){
　　$("p").slideDown(1500);
});

使用callbackパラメータ：

例

$("button").click(function(){
　　$("div").slideDown(1500,　function(){
　　　　alert("スライドダウン完了!");
　　});
});

すべての「.panel」を緩やかな持続時間と線形エッジでスライドダウンさせます：

例

$("#my-Div").click(function(){
　　$(".panel").slideDown("slow",　"linear");
});

すべての範囲（この例では単語）をアニメーション化して速くスライドダウンします、200ミリ秒以内に各アニメーションを完了：

例

$("button").click(function(){
　　$("span:first-child").slideDown("fast",　function(){
　　　　$(this).next().slideDown("fast",　arguments.callee);
　　});
});

パラメータ	説明
duration	（オプション）スライド効果がどれくらいの長さで続くかを決定する。プリセット値は400ミリ秒可能な値：ミリ秒（例えば100、500、2000など）「fast」「slow」
easing	（オプション）アニメーションの異なるポイントで要素の速度を指定する文字列。デフォルト値は「swing」可能な値：「swing」-始めに/終わりに移動が遅く、中間に移動が速い「linear」-恒定的な速度で移動
callback	（オプション）一旦 slideDown() メソッドが完了すると、呼び出される関数、各選択された要素ごとに一度呼び出されます