jQuery 「エフェクト」表示と非表示
引数なしで実行された場合、.show()メソッドは隠された要素を直ちに表示します。反対に、.hide()メソッドは直ちに隠します。.show()メソッドは、displayプロパティがblockに設定されたものと同様であり、初期値がどのような値であったとしても復元できます。もともとdisplayプロパティがinlineに設定されていた要素が隠されていた要素が隠された後に.show()で表示された場合、設定はinlineの状態で表示されます。第1引数の効果時間を指定して実行した場合、.show()も.hide()も、アニメーション効果が効きます。この場合アニメーション効果は、要素の幅、高さ、透明度を同期的に増減させる形になります。「fast（速く）」「slow（遅く）」といった文字列での指定の他、ミリ秒単位の数値でも指定できます。なお、fastは200ミリ秒、slowは600ミリ秒を指定したのと同じになります。.show()および.hide()では、この値は省略可能で、省略した場合は400ミリ秒が設定されたものとして実行されます。.toggle()メソッドは、要素の現在の状態に応じて.show()または.hide()と同様の処理が行われます。例えば、要素の状態が.show()であれば.hide()、.hide()であれば.show()が実行されます。また、引数としてtrue/falseを指定した場合、trueなら.show()、falseなら.hide()同様の処理が行われます。各メソッドの最後の引数は、処理が完了したときに実行されるコールバック関数です。
書式
$("対象要素").show([効果時間],[コールバック]);
$("対象要素").hide([効果時間],[コールバック]);
$("対象要素").toggle([効果時間],[コールバック]);
$("対象要素").toggle(スィッチ);$('div').show();
$('div').hide(600);
$('div').toggle('fast',function(){
alert('toggle');
});
$('div').toggle(false);サンプル
表示と非表示
<html>
<head>
<meta charset="UTF-8">
<title>テストページ</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<style>
span{
display: none;
}
</style>
</head>
<body>
<p class="q">質問：本能寺の変は何年に起きた出来事でしょうか？</div></p>
<button id="open">答えを見る</button>
<button id="close">答えを隠す</button>
<p class="a">天正10年（1582年）</p>
<script>
$(document).ready(function(){
$(".a").hide();
$("#open").on('click',function(){
$(".a").show(400);
});
$("#close").on('click',function(){
$(".a").hide(400);
});
});
</script>
</body>
</html>
