要素の表示／非表示のきりかえ時にちょっとした視覚効果を付け足す方法です。jQuery 本体 だけでも効果的な表示ができますが、jQuery UI のエフェクト を使うとさらに凝った表示が可能になります。
- 目次 -
スポンサーリンク
jQuery 本体だけで
表示／非表示を行う要素に対してメソッドを呼び出します。書式は
|
1 |
$("要素セレクタ").メソッド() |
メソッドとして以下があります。
- 普通の表示／非表示を行うメソッドは
show、hide、toggle - スライド風に表示／非表示を行うメソッドは
slideDown、slideUp、slideToggle - フェードイン、フェードアウトのメソッドは
fadeIn、fadeOut、fadeToggle
デモ
普通の表示／非表示
スライドの上げ下げ
フェードイン、フェードアウト
JQuery sample
ソース
メソッド呼出しのパラメータに 1000 を指定しています。この値は 1000ミリ秒を意味し、アニメーションの実行時間を指します。
|
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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <style type="text/css"> input[type='button'] {width: 90px;height:40px;} </style> <script type="text/javascript"> $(function() { // show、hide、toggle $('#btn-show').click(function() { $('#box_1').show(1000); }); $('#btn-hide').click(function() { $('#box_1').hide(1000); }); $('#btn-toggle').click(function() { $('#box_1').toggle(1000); }); // slide $('#btn-slide-down').click(function() { $('#box_1').slideDown(1000); }); $('#btn-slide-up').click(function() { $('#box_1').slideUp(1000); }); $('#btn-slide-toggle').click(function() { $('#box_1').slideToggle(1000); }); // fade $('#btn-fade-in').click(function() { $('#box_1').fadeIn(1000); }); $('#btn-fade-out').click(function() { $('#box_1').fadeOut(1000); }); $('#btn-fade-toggle').click(function() { $('#box_1').fadeToggle(1000); }); }); </script> </head> <body> <div> <input id="btn-show" type="button" value="show" /> <input id="btn-hide" type="button" value="hide" /> <input id="btn-toggle" type="button" value="toggle" /> </div> <div> <input id="btn-slide-down" type="button" value="slide down" /> <input id="btn-slide-up" type="button" value="slide up" /> <input id="btn-slide-toggle" type="button" value="slide toggle" /> </div> <div> <input id="btn-fade-in" type="button" value="fade in" /> <input id="btn-fade-out" type="button" value="fade out" /> <input id="btn-fade-toggle" type="button" value="fade toggle" /> </div> <div id="box_1" style="width:130px;height:130px;background-color:#0ff"> JQuery UI sample </div> </body> </html> |
jQuery UI のエフェクトを使う
jQuery UI のエフェクトを使う場合は、文字列でエフェクトを指定し、show、hide、toggle メソッドを呼び出します。
|
1 |
$('要素セレクタ').show('エフェクト') |
エフェクトは、次のいずれかを指定します。
blind
bounce
clip
drop
explode
fold
fade
highlight
puff
pulsate
scale
shake
size
slide
bounce
clip
drop
explode
fold
fade
highlight
puff
pulsate
scale
shake
size
slide
（ブラインド）
（バウンド）
（両端から挟んで伸縮）
（スライド＋フェード）
（破片が飛びちる）
（折り畳み）
（フェード）
（ハイライト）
（拡大しつつ切りかえ）
（振動）
（拡大縮小、パーセント指定）
（シェイク）
（拡大縮小、サイズ指定）
（スライド）
（バウンド）
（両端から挟んで伸縮）
（スライド＋フェード）
（破片が飛びちる）
（折り畳み）
（フェード）
（ハイライト）
（拡大しつつ切りかえ）
（振動）
（拡大縮小、パーセント指定）
（シェイク）
（拡大縮小、サイズ指定）
（スライド）
デモ
エフェクト選択 ：
JQuery UI sample
ソース
|
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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<html> <head> <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> <style type="text/css"> input[type='button'] {width: 90px;height:40px;} </style> <script type="text/javascript"> var get_options = function(eff) { if ( eff === 'scale' ) { return { percent: 30 }; } else if ( eff === 'size' ) { return { to: { width: 30, height: 30 } }; } else { return {}; } } $(function() { $('#btn-show-eff').click(function() { var selected_eff = $('#eff').val(); $('#box_2').show(selected_eff, get_options(selected_eff), 1000); }); $('#btn-hide-eff').click(function() { var selected_eff = $('#eff').val(); $('#box_2').hide(selected_eff, get_options(selected_eff), 1000); }); $('#btn-toggle-eff').click(function() { var selected_eff = $('#eff').val(); $('#box_2').toggle(selected_eff, get_options(selected_eff), 1000); }); }); </script> </head> <body> <select id="eff"> <option value="blind">Blind</option> <option value="bounce">Bounce</option> <option value="clip">Clip</option> <option value="drop">Drop</option> <option value="explode">Explode</option> <option value="fold">Fold</option> <option value="fade">Fade</option> <option value="highlight">Highlight</option> <option value="puff">Puff</option> <option value="pulsate">Pulsate</option> <option value="scale">Scale</option> <option value="shake">Shake</option> <option value="size">Size</option> <option value="slide">Slide</option> </select> <div> <input id="btn-show-eff" type="button" value="show" /> <input id="btn-hide-eff" type="button" value="hide" /> <input id="btn-toggle-eff" type="button" value="toggle" /> </div> <div id="box_2" style="width:130px;height:130px;background-color:#ff0"> JQuery UI sample </div> </body> </html> |
gemlik gazetesi says:
eğer bunlar doğruysa yer yerinden oynar 🤪