「jQuery」スライドダウン、スライドアップのサンプル
環境
jquery 3.6.0
書式
$(セレクタ名).slideUp(時間)
$(セレクタ名).slideDown(時間)
$(セレクタ名).slideToggle(時間)
$(セレクタ名).slideUp(時間)
$(セレクタ名).slideDown(時間)
$(セレクタ名).slideToggle(時間)
$(セレクタ名).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>
<!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>
<!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>
結果
「スライドアップ」ボタンを押すと、スライドアップのアニメーションを行います。
「スライドダウン」ボタンを押すと、スライドダウンのアニメーションを行います。