<div><button id="show_btn">表示</button>
<button id="hide_btn">非表示</button></div>
<div id="hide_area1">テキスト</div>
<div id="hide_area2">テキスト</div>
<div id="hide_area3">テキスト</div>
div{float:left;}
#hide_area1{display:none; width:150px; height:150px; background-color:red;}
#hide_area2{display:none; width:150px; height:150px; background-color:green;}
#hide_area3{display:none; width:150px; height:150px; background-color:grey;}
$(function () {
//この中に処理を記述 開始
//表示ボタンをクリックした場合
$("#show_btn").on("click",function() {
$("#hide_area1").show(); //即座に表示
$("#hide_area2").show('slow'); //スローで表示
$("#hide_area3").show(1000); //10秒かけて表示
});
//非表示ボタンをクリックした場合
$("#hide_btn").on("click",function() {
$("#hide_area1").hide(); //即座に非表示
$("#hide_area2").hide('slow'); //スローで非表示
$("#hide_area3").hide(1000); //10秒かけて非表示
});
//記述終了
});
This Pen doesn't use any external CSS resources.