jQuery003 表示・非表示のメソッド
表示・非表示のメソッド
■ポイント
・主要なメソッドの種類
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デザイン入門