jQueryの基本チュートリアル

jQueryの効果

slideToggle()メソッドはslideUp()およびslideDown()メソッド間で切り替えます。

このメソッドは選択された要素の可視性を確認します：

注意：非表示の要素はページのレイアウトに影響を与えなくなります。

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

ボタンをクリックしたとき、すべての<p>要素の上移動と下移動の間で切り替えます：

サンプル

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

使用durationパラメータ：

サンプル

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

使用callbackパラメータ：

サンプル

$("button").click(function() {
　　$("div").slideToggle();1500, function() {
　　　　alert("スライドトーゲル効果が完了しました!!!");
　　});
});

すべての「.panel」をスローの持続時間と線形のエッジでスライドトーゲルします。

サンプル

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

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