「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>

結果
「スライドアップ」ボタンを押すと、スライドアップのアニメーションを行います。
「スライドダウン」ボタンを押すと、スライドダウンのアニメーションを行います。

jQuery

Posted by arkgame