jQuery slideUpメソッドとslideDownメソッドでスライドしながら表示/非表示にするサンプル

2022年11月21日

環境
jquery 3.6.
Google Chrome 107.0.5304.107

構文
$(“#セレクターID名").slideUp();
slideUpメソッドで上にスライドしながら文言を非表示にします。
$(“#セレクターID名").slideDown();
slideDownメソッドで下にスライドしながら文言を表示します。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
div {background-color:skyblue;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
      $("#btns").click(function() {
            // 上にスライドしながら非表示にする
            $("#cft").slideUp();
            // 下にスライドしながら表示する
            $("#cft").slideDown();
      });
});
</script>
</head>
<body>

<p id="cft">test message </p>
<input type="button" value="確認" id="btns"  />

</body>
</html>

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

jQuery

Posted by arkgame

関連投稿: