jQuery効果-slideDown()メソッド[メニューナビゲーションバーでよく使用]
2839 ワード
≪インスタンス｜Instance｜emdw≫
非表示の
定義と使用法
slideDown()メソッドは、スライド効果を使用することで、非表示の選択された要素を表示します.
構文
パラメータ
説明
speed
オプション.エレメントの非表示から表示への速度(または逆)を指定します.デフォルトは「normal」です.可能な値は次のとおりです.ミリ秒(例えば1500) "slow" "normal" "fast"
速度を設定すると、要素が非表示から表示になるまで徐々に高さが変わります.
callback
オプション.slideDown関数の実行が完了したら、実行する関数.callbackの詳細については、jQuery Callbackの章を参照してください.speedパラメータが設定されていない限り、このパラメータは設定できません.
ヒントとコメント
ヒント:要素が完全に表示されている場合、callback関数が規定されていない限り、この効果は変化しません.
注記:この効果は、jQueryで非表示になっている要素、またはCSSでdisplay:noneを宣言する要素に適用されます(ただし、visibility:hiddenの要素には適用されません).
テストコード:
非表示の
要素をスライド表示:
$(".btn2").click(function(){
$("p").slideDown();
});
定義と使用法
slideDown()メソッドは、スライド効果を使用することで、非表示の選択された要素を表示します.
構文
$(selector).slideDown(speed,callback)パラメータ
説明
speed
オプション.エレメントの非表示から表示への速度(または逆)を指定します.デフォルトは「normal」です.可能な値は次のとおりです.
速度を設定すると、要素が非表示から表示になるまで徐々に高さが変わります.
callback
オプション.slideDown関数の実行が完了したら、実行する関数.callbackの詳細については、jQuery Callbackの章を参照してください.speedパラメータが設定されていない限り、このパラメータは設定できません.
ヒントとコメント
ヒント:要素が完全に表示されている場合、callback関数が規定されていない限り、この効果は変化しません.
注記:この効果は、jQueryで非表示になっている要素、またはCSSでdisplay:noneを宣言する要素に適用されます(ただし、visibility:hiddenの要素には適用されません).
テストコード:
1 <html>
2 <head>
3 <script type="text/javascript" src="/jquery/jquery.js"></script>
4 <script type="text/javascript">
5 $(document).ready(function(){
6 $(".hide").click(function(){
7 $("p").slideUp(1000);
8 });
9 $(".show").click(function(){
10 $("p").slideDown(1000);
11 });
12 });
13 </script>
14 </head>
15 <body>
16 <button class="hide"> </button>
17 <button class="show"> </button>
18 <p> ...</p>
19 </body>
20 </html>