[jQuery]slideUpメソッドとslideDownメソッドでスライドしながら表示/非表示にする

2022年9月28日

環境
Google Chrome 105.0.5195.127
Windows 10 Home 64bit

構文
.slideUp( [duration ] [, complete ] )
slideUpメソッドは、要素を上にスライドしながら非表示にします。
.slideDown( [duration ] [, complete ] )
slideDownメソッドは、要素を下にスライドしながら表示します。

使用例

<!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();
            // 下にスライドしながら表示します
            $("#tt").slideDown();
      });
});
</script>
</head>
<body>
<div id="tt">study skill become smart</div>
<input type="button" value="検証" id="btnchk"  />

</body>
</html>

実行結果
「検証」ボタンを押すと上にスライドしながらdiv要素の文字を非表示にした後、下にスライドしながらdiv要素の文字を表示します。

jQuery

Posted by arkgame

関連投稿: