jQueryで要素の表示・非表示をする方法についてまとめてみました。
よりよい方法やバグ等ございましたら、アドバイスいただけると光栄です。
まず、要素の表示・非表示をするには以下の３種類の方法があります。
１．要素の非表示
２．要素の表示
３．要素の表示・非表示の切り替え
##１．要素の非表示
下記HTMLファイルがあった時に表示されている要素を隠すには、複数の方法があります。
<body>
<button>ここをクリック</button>
<img src="../jquery.jpg"/>
</body>
###１－１．hideメソッド
hideメソッドを使うと、表示されている要素を隠すことができます。引数には非表示にする際の時間と、コールバック関数を指定できます。
$(function () {
$('button').on('click', () => {
$('img').hide();
});
});
※引数に時間を設定すると、右下から左上に向かって要素が隠れていきます。
$(function () {
$('button').on('click', () => {
$('img').hide('slow');
});
});
[hide() - jQuery 日本語リファレンス][hide]
[hide]:http://js.studio-kingdom.com/jquery/effects/hide
###１－２．fadeOutメソッド
fadeOutメソッドを使うと、表示されている要素をフェードアウトして隠すことができます。引数には非表示にする際の時間と、コールバック関数を指定できます。
$(function () {
$('button').on('click', () => {
$('img').fadeOut();
});
});
[fadeOut() - jQuery 日本語リファレンス][fadeOut]
[fadeOut]:http://js.studio-kingdom.com/jquery/effects/fade_out
###１－３．slideUpメソッド
slideUpメソッドを使うと、各要素の高さを操作して、下から上に消えていくイメージの効果で非表示にします。引数には非表示にする際の時間と、コールバック関数を指定できます。
$(function () {
$('button').on('click', () => {
$('img').slideUp();
});
});
[slideUp() - jQuery 日本語リファレンス][slideUp]
[slideUp]:http://js.studio-kingdom.com/jquery/effects/slide_up
##２．要素の表示
下記HTMLファイルがあった時に隠されている要素を表示するには、複数の方法があります。
<body>
<button>ここをクリック</button>
<img style="display: none;" src="../jquery.jpg"/>
</body>
###２－１．showメソッド
showメソッドを使うと、隠れている要素を表示ことができます。引数には非表示にする際の時間と、コールバック関数を指定できます。
$(function () {
$('button').on('click', () => {
$('img').show();
});
});
※引数に時間を設定すると、左上から右下に向かって要素が表示されていきます。
$(function () {
$('button').on('click', () => {
$('img').show('slow');
});
});
[show() - jQuery 日本語リファレンス][show]
[show]:http://js.studio-kingdom.com/jquery/effects/show
###２－２．fadeInメソッド
fadeInメソッドを使うと、要素をフェードインして表示することができます。引数には表示にする際の時間と、コールバック関数を指定できます。
$(function () {
$('button').on('click', () => {
$('img').fadeIn();
});
});
[fadeIn() - jQuery 日本語リファレンス][fadeIn]
[fadeIn]:http://js.studio-kingdom.com/jquery/effects/fade_in
###２－３．slideDownメソッド
slideDownメソッドを使うと、各要素の高さを操作して、上から下に出現していくイメージの効果で表示します。引数には表示にする際の時間と、コールバック関数を指定できます。
$(function () {
$('button').on('click', () => {
$('img').slideDown();
});
});
[slideDown() - jQuery 日本語リファレンス][slideDown]
[slideDown]:http://js.studio-kingdom.com/jquery/effects/slide_down
##３．要素の表示・非表示
下記HTMLファイルがあった時に隠されている要素を表示するには、複数の方法があります。
<body>
<button>ここをクリック</button>
<img src="../jquery.jpg"/>
</body>
###３－１．toggleメソッド
toggleメソッドを使うと、showメソッドとhideメソッドを交互に実行します。引数には非表示にする際の時間と、コールバック関数を指定できます。
$(function () {
$('button').click(function () {
$('img').toggle();
});
});
※引数に時間を設定すると、左上から右下に向かって要素が表示されていき、右下から左上に向かって要素が隠れていきます。
$(function () {
$('button').on('click', () => {
$('img').toggle('slow');
});
});
[toggle() - jQuery 日本語リファレンス][toggle]
[toggle]:http://js.studio-kingdom.com/jquery/effects/toggle
###３－２．fadeToggleメソッド
fadeToggleメソッドを使うと、各要素の高さを操作して、fadeOutメソッドとfadeInメソッドを交互に実行します。引数には非表示にする際の時間と、コールバック関数を指定できます。
$(function () {
$('button').on('click', () => {
$('img').fadeToggle();
});
});
[fadeToggle() - jQuery 日本語リファレンス][fadeToggle]
[fadeToggle]:http://js.studio-kingdom.com/jquery/effects/fade_toggle
###３－３．slideToggleメソッド
slideToggleメソッドを使うと、各要素の高さを操作して、slideDownメソッドとslideUpメソッドを交互に実行します。引数には非表示にする際の時間と、コールバック関数を指定できます。
$(function () {
$('button').on('click', () => {
$('img').slideToggle();
});
});
[slideToggle() - jQuery 日本語リファレンス][slideUp]
[slideToggle]:http://js.studio-kingdom.com/jquery/effects/slide_toggle
##４．aminateメソッド
aminateメソッドを使えば、より多様な動きを付けることが出来ます。
[animate() - jQuery 日本語リファレンス][animate]
[animate]:http://js.studio-kingdom.com/jquery/effects/animate
###４ー１．縦方向の表示・非表示
aminateメソッドの1つ目の引数である properties 内を、{ height: *** } に指定することで、縦方向の出現や隠す動作を行えます。「 *** 」には、hide・show・toggle などを指定します。
動き方としては、上方向に動きながら消え、下方向に動きながら出現します。
見た目上では、slideUpメソッド・slideDownメソッド・slideToggleメソッドの動きとほぼ変わりません。
$(function () {
$('button').on('click', () => {
$('img').animate({ width: 'hide' }, 'slow'); // 上に非表示
$('img').animate({ width: 'show' }, 'slow'); // 下に表示
$('img').animate({ width: 'toggle' }, 'slow'); // 上下に表示・非表示
});
});
※opacity と併用することで、透明にしながら折りたたむことも可能です。
$(function () {
$('button').on('click', () => {
$('img').animate(
{
height: 'width', // 要素の表示・非表示
opacity: 'width' // 透明・不透明の切り替え
},
'slow'
);
});
});
###４ー２．横方向の表示・非表示
aminateメソッドの1つ目の引数である properties 内を、{ width: *** } に指定することで、横方向の出現や隠す動作を行えます。「 *** 」には、hide・show・toggle などを指定します。
動き方としては、左方向に動きながら消え、右方向に動きながら出現します。
$(function () {
$('button').on('click', () => {
$('img').animate({ height: 'hide' }, 'slow'); // 左に非表示
$('img').animate({ height: 'show' }, 'slow'); // 右に表示
$('img').animate({ height: 'toggle' }, 'slow'); // 左右に表示・非表示
});
});
※jQuery Easing Pluginと併用することで、様々な動き方に変更できます。
[jQuery Easing Plugin エフェクト一覧ページ][easing]
[easing]:http://ozpa-h4.com/demo/easing/
$( function () {
$('button').on('click', () => {
$('img').animate(
{
width: 'toggle' // 左右に表示・非表示
},
{
duration: 2000, // 速度
easing: 'easeOutBounce' // 最後跳ねながら、左に非表示
}
);
});
});
##関連URL
[jQuery 日本語リファレンス][jquery]
[jQuery Easing Plugin エフェクト一覧ページ][easing]
[jquery]:http://js.studio-kingdom.com/jquery/