ねこきっくぱんちのメモ帳

webの勉強メモです。 HTML,CSS,JavaScript,PHP,Illustrator,Photoshopなど。

jQuery003 表示・非表示のメソッド

表示・非表示のメソッド

f:id:neko_kick_panch:20170531011056p:plain

■ポイント
・主要なメソッドの種類
 hide,show
 slideUp,slideDown
 toggle
 fadeIn,fadeOut
・時間の指定
 ('slow'),('2000')
・アニメーション実行中は次の処理を受け付けない
 $('#box:not(:animated)').slideUp('2000');

■コード
html埋め込み

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの基本</title>
<meta name="description" content="">
<link href="css/style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<meta name="viewport" content="width=device-width">
</head>

<style>
html,body,h1,h2,p,ul,li{
  margin:0;
  padding:0;
}
body{
  padding: 20px;
}
div{
  width: 200px;
  height: 200px;
  background: red;
  display: none;
}
</style>

<script>
$(document).ready(function(){
  $('#btn1').on('click',function(){
    $('#box:not(:animated)').slideDown('2000');
  })
  $('#btn2').on('click',function(){
    $('#box:not(:animated)').slideUp('2000');
  })
  $('#btn').on('click',function(){
    $('#box').toggle(2000);
  })
});

/*
hide,show
slideUp,slideDown
toggle
fadeIn,fadeOut
*/
</script>

<body>
<button id="btn">赤い箱を表示/非表示</button>
<button id="btn1">表示ボタン</button>
<button id="btn2">非表示ボタン</button>
<div id="box">
</div>
</body>
</html>

■参考
本:jQueryデザイン入門