hide()メソッド
- 表示されている要素を非表示にする
- 引数がない場合は、即座に非表示
- キーワードは、「slow」「normal」「fast」のいずれかを記述
- 秒数で指定する場合は、「1000」が1秒
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>hide()メソッド</title>
<style>
.box {width: 300px; height: 300px;}
#hide1 {background-color: #FDF9A1;}
#hide2 {background-color: #E1C9F9;}
#hide3 {background-color: #9BE074;}
</style>
</head>
<body>
<div id="hide1" class="box">即座に非表示</div>
<div id="hide2" class="box">スローで非表示</div>
<div id="hide3" class="box">10秒かけて非表示</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function(){
$('#hide1').hide();
$('#hide2').hide('slow');
$('#hide3').hide(10000);
});
</script>
</body>
</html>
show()メソッド
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>show()メソッド</title>
<style>
.box {width: 300px; height: 300px; display: none;}
#show1 {background-color: #FDF9A1;}
#show2 {background-color: #E1C9F9;}
#show3 {background-color: #9BE074;}
</style>
</head>
<body>
<div id="show1" class="box">即座に表示</div>
<div id="show2" class="box">スローで表示</div>
<div id="show3" class="box">5秒かけて表示</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function(){
$('#show1').show();
$('#show2').show('slow');
$('#show3').show(5000);
});
</script>
</body>
</html>
show()メソッドとhide()メソッド
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>show()メソッドとhide()メソッド</title>
<style>
.box {float: left; width: 300px; height: 300px; display: none;}
#hide1 {background-color: #FDF9A1;}
#hide2 {background-color: #E1C9F9;}
#hide3 {background-color: #9BE074;}
</style>
</head>
<body>
<p><button id="show_btn">表示</button> <button id="hide_btn">非表示</button></p>
<div id="hide1" class="box">即座に</div>
<div id="hide2" class="box">スローで</div>
<div id="hide3" class="box">3秒かけて</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function(){
$('#show_btn').on('click',function(){
$('#hide1').show();
$('#hide2').show('slow');
$('#hide3').show(3000);
});
$('#hide_btn').on('click',function(){
$('#hide1').hide();
$('#hide2').hide('slow');
$('#hide3').hide(3000);
});
});
</script>
</body>
</html>
fadeOut()メソッド
- 表示されている要素をフェードアウトする
- フェードアウト(透明になりながら消える)のアニメーションをしながら非表示にします
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>fadeOut()メソッド</title>
<style>
.box {float: left; width: 300px; height: 300px;}
#fadeout1 {background-color: #FDF9A1;}
#fadeout2 {background-color: #E1C9F9;}
#fadeout3 {background-color: #9BE074;}
</style>
</head>
<body>
<div id="fadeout1" class="box">即座に</div>
<div id="fadeout2" class="box">スローで</div>
<div id="fadeout3" class="box">5秒かけて</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function(){
$('#fadeout1').fadeOut();
$('#fadeout2').fadeOut('slow');
$('#fadeout3').fadeOut(5000);
});
</script>
</body>
</html>
fadeIn()メソッド
- 非表示されている要素をフェードインする
- フェードイン(透明度0%から100%)のアニメーションをしながら表示にします
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>fadeIn()メソッド</title>
<style>
.box {float: left; width: 300px; height: 300px; display: none;}
#fadein1 {background-color: #FDF9A1;}
#fadein2 {background-color: #E1C9F9;}
#fadein3 {background-color: #9BE074;}
</style>
</head>
<body>
<div id="fadein1" class="box">即座に</div>
<div id="fadein2" class="box">スローで</div>
<div id="fadein3" class="box">5秒かけて</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function(){
$('#fadein1').fadeIn();
$('#fadein2').fadeIn('slow');
$('#fadein3').fadeIn(5000);
});
</script>
</body>
</html>
slideDown()メソッド
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>slideDown()メソッド</title>
<style>
.box {float: left; width: 300px; height: 300px; display: none;}
#slidedown1 {background-color: #FDF9A1;}
#slidedown2 {background-color: #E1C9F9;}
#slidedown3 {background-color: #9BE074;}
</style>
</head>
<body>
<div id="slidedown1" class="box">即座に</div>
<div id="slidedown2" class="box">スローで</div>
<div id="slidedown3" class="box">5秒かけて</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function(){
$('#slidedown1').slideDown();
$('#slidedown2').slideDown('slow');
$('#slidedown3').slideDown(5000);
});
</script>
</body>
</html>
slideUp()メソッド
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>slideUp()メソッド</title>
<style>
.box {float: left; width: 300px; height: 300px;}
#slideup1 {background-color: #FDF9A1;}
#slideup2 {background-color: #E1C9F9;}
#slideup3 {background-color: #9BE074;}
</style>
</head>
<body>
<div id="slideup1" class="box">即座に</div>
<div id="slideup2" class="box">スローで</div>
<div id="slideup3" class="box">5秒かけて</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function(){
$('#slideup1').slideUp();
$('#slideup2').slideUp('slow');
$('#slideup3').slideUp(5000);
});
</script>
</body>
</html>
slideToggle()メソッド
- 要素の表示・非表示を切り替える
- 「display: none」のある・なしで表示・非表示を切り替える
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>slideToggle()メソッド</title>
<style>
.box {float: left; width: 300px; height: 300px; display: none;}
#slidetoggle1 {background-color: #FDF9A1;}
#slidetoggle2 {background-color: #E1C9F9;}
#slidetoggle3 {background-color: #9BE074;}
</style>
</head>
<body>
<div id="slidetoggle1" class="box">即座に</div>
<div id="slidetoggle2" class="box">スローで</div>
<div id="slidetoggle3" class="box">5秒かけて</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function(){
$("#slidetoggle1").slideToggle();
$("#slidetoggle2").slideToggle('slow');
$("#slidetoggle3").slideToggle(5000);
});
</script>
</body>
</html>
ボタンで切り替えるslideToggle()メソッド
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>slideToggle()メソッド</title>
<style>
.box {float: left; width: 300px; height: 300px; display: none;}
#slidetoggle1 {background-color: #FDF9A1;}
#slidetoggle2 {background-color: #E1C9F9;}
#slidetoggle3 {background-color: #9BE074;}
</style>
</head>
<body>
<p><button id="toggle_btn">表示 or 非表示</button></p>
<div id="slidetoggle1" class="box">即座に</div>
<div id="slidetoggle2" class="box">スローで</div>
<div id="slidetoggle3" class="box">2秒かけて</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function(){
$("#toggle_btn").on("click",function(){
$("#slidetoggle1").slideToggle();
$("#slidetoggle2").slideToggle('slow');
$("#slidetoggle3").slideToggle(2000);
});
});
</script>
</body>
</html>