jQueryで要素の表示・非表示をする方法についてまとめてみました。
よりよい方法やバグ等ございましたら、アドバイスいただけると光栄です。
まず、要素の表示・非表示をするには以下の3種類の方法があります。
1.要素の非表示
2.要素の表示
3.要素の表示・非表示の切り替え
1.要素の非表示
下記HTMLファイルがあった時に表示されている要素を隠すには、複数の方法があります。
<body>
<button>ここをクリック</button>
<img src="../jquery.jpg"/>
</body>
1-1.hideメソッド
hideメソッドを使うと、表示されている要素を隠すことができます。引数には非表示にする際の時間と、コールバック関数を指定できます。
$(function () {
$('button').on('click', () => {
$('img').hide();
});
});
※引数に時間を設定すると、右下から左上に向かって要素が隠れていきます。
$(function () {
$('button').on('click', () => {
$('img').hide('slow');
});
});
1-2.fadeOutメソッド
fadeOutメソッドを使うと、表示されている要素をフェードアウトして隠すことができます。引数には非表示にする際の時間と、コールバック関数を指定できます。
$(function () {
$('button').on('click', () => {
$('img').fadeOut();
});
});
1-3.slideUpメソッド
slideUpメソッドを使うと、各要素の高さを操作して、下から上に消えていくイメージの効果で非表示にします。引数には非表示にする際の時間と、コールバック関数を指定できます。
$(function () {
$('button').on('click', () => {
$('img').slideUp();
});
});
2.要素の表示
下記HTMLファイルがあった時に隠されている要素を表示するには、複数の方法があります。
<body>
<button>ここをクリック</button>
<img style="display: none;" src="../jquery.jpg"/>
</body>
2-1.showメソッド
showメソッドを使うと、隠れている要素を表示ことができます。引数には非表示にする際の時間と、コールバック関数を指定できます。
$(function () {
$('button').on('click', () => {
$('img').show();
});
});
※引数に時間を設定すると、左上から右下に向かって要素が表示されていきます。
$(function () {
$('button').on('click', () => {
$('img').show('slow');
});
});
2-2.fadeInメソッド
fadeInメソッドを使うと、要素をフェードインして表示することができます。引数には表示にする際の時間と、コールバック関数を指定できます。
$(function () {
$('button').on('click', () => {
$('img').fadeIn();
});
});
2-3.slideDownメソッド
slideDownメソッドを使うと、各要素の高さを操作して、上から下に出現していくイメージの効果で表示します。引数には表示にする際の時間と、コールバック関数を指定できます。
$(function () {
$('button').on('click', () => {
$('img').slideDown();
});
});
slideDown() - jQuery 日本語リファレンス
3.要素の表示・非表示
下記HTMLファイルがあった時に隠されている要素を表示するには、複数の方法があります。
<body>
<button>ここをクリック</button>
<img src="../jquery.jpg"/>
</body>
3-1.toggleメソッド
toggleメソッドを使うと、showメソッドとhideメソッドを交互に実行します。引数には非表示にする際の時間と、コールバック関数を指定できます。
$(function () {
$('button').click(function () {
$('img').toggle();
});
});
※引数に時間を設定すると、左上から右下に向かって要素が表示されていき、右下から左上に向かって要素が隠れていきます。
$(function () {
$('button').on('click', () => {
$('img').toggle('slow');
});
});
3-2.fadeToggleメソッド
fadeToggleメソッドを使うと、各要素の高さを操作して、fadeOutメソッドとfadeInメソッドを交互に実行します。引数には非表示にする際の時間と、コールバック関数を指定できます。
$(function () {
$('button').on('click', () => {
$('img').fadeToggle();
});
});
fadeToggle() - jQuery 日本語リファレンス
3-3.slideToggleメソッド
slideToggleメソッドを使うと、各要素の高さを操作して、slideDownメソッドとslideUpメソッドを交互に実行します。引数には非表示にする際の時間と、コールバック関数を指定できます。
$(function () {
$('button').on('click', () => {
$('img').slideToggle();
});
});
slideToggle() - jQuery 日本語リファレンス
4.aminateメソッド
aminateメソッドを使えば、より多様な動きを付けることが出来ます。
4ー1.縦方向の表示・非表示
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'
);
});
});
4ー2.横方向の表示・非表示
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 エフェクト一覧ページ
$( function () {
$('button').on('click', () => {
$('img').animate(
{
width: 'toggle' // 左右に表示・非表示
},
{
duration: 2000, // 速度
easing: 'easeOutBounce' // 最後跳ねながら、左に非表示
}
);
});
});