LoginSignup
160

More than 3 years have passed since last update.

jQueryで要素の表示・非表示を切り替える方法について

Last updated at Posted at 2017-12-09

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');
    });
});

hide() - jQuery 日本語リファレンス

1-2.fadeOutメソッド

fadeOutメソッドを使うと、表示されている要素をフェードアウトして隠すことができます。引数には非表示にする際の時間と、コールバック関数を指定できます。

$(function () {
    $('button').on('click', () => {
        $('img').fadeOut();
    });
});

fadeOut() - jQuery 日本語リファレンス

1-3.slideUpメソッド

slideUpメソッドを使うと、各要素の高さを操作して、下から上に消えていくイメージの効果で非表示にします。引数には非表示にする際の時間と、コールバック関数を指定できます。

$(function () {
    $('button').on('click', () => {
        $('img').slideUp();
    });
});

slideUp() - jQuery 日本語リファレンス

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');
    });
});

show() - jQuery 日本語リファレンス

2-2.fadeInメソッド

fadeInメソッドを使うと、要素をフェードインして表示することができます。引数には表示にする際の時間と、コールバック関数を指定できます。

$(function () {
    $('button').on('click', () => {
        $('img').fadeIn();
    });
});

fadeIn() - jQuery 日本語リファレンス

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');
    });
});

toggle() - jQuery 日本語リファレンス

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メソッドを使えば、より多様な動きを付けることが出来ます。

animate() - jQuery 日本語リファレンス

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' // 最後跳ねながら、左に非表示
            }
        );
    });
});

関連URL

jQuery 日本語リファレンス
jQuery Easing Plugin エフェクト一覧ページ

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
160