toggle()は、要素の表示・非表示を交互に
切り替える命令です。セレクターで指定した要素が
表示されている場合は非表示に、非表示の場合は表示の状態に
変更します。show()/hide()と同様に、toggle(...)の括弧内には
アニメーションのスピードとコールバック関数を指定できます。
$( セレクター ).toggle( スピード, コールバック関数 );
サンプルコードでは、ボタンがクリックされるたびに
div要素の表示・非表示と切り替えるものです。
実行結果はこちらです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQueryStudy</title> <style> *{margin:0;padding:0;} #container{ width:640px; height:400px; background-color:white; font-weight:100; margin:0 auto;} div{ width:100px; height:100px; display:block; background-color:blue;} </style> <script src="js/jquery-1.11.3.js"></script> </head> <body> <button>表示・非表示</button> <div></div> <script> $(function(){ $("button").click(function(){ $("div:not(:animated)").toggle("slow"); }); }); </script> </body> </html> |