<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秒かけて非表示
  });
  //記述終了
    });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js