「jQuery」スライドダウン、スライドアップのサンプル
環境
jquery 3.6.0
書式
$(セレクタ名).slideUp(時間) $(セレクタ名).slideDown(時間) $(セレクタ名).slideToggle(時間)
slideToggleは、対象要素が表示されていればslideDown、非表示の場合はslideUpを実行します。
使用例
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(function(){ $('#btnUp').click(function(){ //スライドアップ $('#cft').slideUp(1000); }); $('#btnDown').click(function(){ //スライドダウン $('#cft').slideDown(1000); }); $('#btnToggle').click(function(){ //トグル $('#cft').slideToggle(1000); }); }); </script> <!--CSSの定義--> <style> #cft{ width:200px; height:100px; background-color:skyblue; } </style> </head> <body> <p><input type="button" id="btnUp" value="スライドアップ"></p> <p> <input type="button" id="btnDown" value="スライドダウン"></p> <p><input type="button" id="btnToggle" value="トグル"></p> <div id="cft">表示文字が変わります</div> </body> </html>
結果
「スライドアップ」ボタンを押すと、スライドアップのアニメーションを行います。
「スライドダウン」ボタンを押すと、スライドダウンのアニメーションを行います。