「jQuery」slideUpメソッドとslideDownメソッドで表示/非表示の秒数を設定するサンプル
環境
Google Chrome 105.0.5195.127
Windows 10 Home 64bit
構文
.slideUp( [duration ] [, complete ] )
slideUpメソッドは、要素を上にスライドしながら非表示にします。
.slideDown( [duration ] [, complete ] )
slideDownメソッドは、要素を下にスライドしながら表示します。
1秒(1000ミリ秒)かけて表示/非表示にします。設定する単位はミリ秒です。
使用例
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(function(){ $("#btnchk").click(function() { // 上にスライドしながら非表示にします $("#tt").slideUp(1500); // 下にスライドしながら表示します $("#tt").slideDown(1500); }); }); </script> </head> <body> <div id="tt">study skill become smart</div> <input type="button" value="検証" id="btnchk" /> </body> </html>
実行結果
「検証」ボタンを押すと1.5秒かけて表示し1.5秒かけて非表示にします。