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

jQueryで要素の表示・非表示をする方法についてまとめてみました。
よりよい方法やバグ等ございましたら、アドバイスいただけると光栄です。

まず、要素の表示・非表示をするには以下の３種類の方法があります。
>１．要素の非表示
>２．要素の表示
>３．要素の表示・非表示の切り替え


##１．要素の非表示
下記HTMLファイルがあった時に表示されている要素を隠すには、複数の方法があります。

```html
<body>
    <button>ここをクリック</button>
    <img src="../jquery.jpg"/>
</body>
```

###１－１．hideメソッド
hideメソッドを使うと、表示されている要素を隠すことができます。引数には非表示にする際の時間と、コールバック関数を指定できます。

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

※引数に時間を設定すると、右下から左上に向かって要素が隠れていきます。

```js
$(function () {
    $('button').on('click', () => {
        $('img').hide('slow');
    });
});
```

[hide() - jQuery 日本語リファレンス][hide]
[hide]:http://js.studio-kingdom.com/jquery/effects/hide

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

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

[fadeOut() - jQuery 日本語リファレンス][fadeOut]
[fadeOut]:http://js.studio-kingdom.com/jquery/effects/fade_out

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

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

[slideUp() - jQuery 日本語リファレンス][slideUp]
[slideUp]:http://js.studio-kingdom.com/jquery/effects/slide_up


##２．要素の表示
下記HTMLファイルがあった時に隠されている要素を表示するには、複数の方法があります。

```html
<body>
    <button>ここをクリック</button>
    <img style="display: none;" src="../jquery.jpg"/>
</body>
```

###２－１．showメソッド
showメソッドを使うと、隠れている要素を表示ことができます。引数には非表示にする際の時間と、コールバック関数を指定できます。

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

※引数に時間を設定すると、左上から右下に向かって要素が表示されていきます。

```js
$(function () {
    $('button').on('click', () => {
        $('img').show('slow');
    });
});
```

[show() - jQuery 日本語リファレンス][show]
[show]:http://js.studio-kingdom.com/jquery/effects/show

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

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

[fadeIn() - jQuery 日本語リファレンス][fadeIn]
[fadeIn]:http://js.studio-kingdom.com/jquery/effects/fade_in

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

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

[slideDown() - jQuery 日本語リファレンス][slideDown]
[slideDown]:http://js.studio-kingdom.com/jquery/effects/slide_down



##３．要素の表示・非表示
下記HTMLファイルがあった時に隠されている要素を表示するには、複数の方法があります。

```html
<body>
    <button>ここをクリック</button>
    <img src="../jquery.jpg"/>
</body>
```

###３－１．toggleメソッド
toggleメソッドを使うと、showメソッドとhideメソッドを交互に実行します。引数には非表示にする際の時間と、コールバック関数を指定できます。

```js
$(function () {
    $('button').click(function () {
        $('img').toggle();
    });
});
```

※引数に時間を設定すると、左上から右下に向かって要素が表示されていき、右下から左上に向かって要素が隠れていきます。

```js
$(function () {
    $('button').on('click', () => {
        $('img').toggle('slow');
    });
});
```

[toggle() - jQuery 日本語リファレンス][toggle]
[toggle]:http://js.studio-kingdom.com/jquery/effects/toggle

###３－２．fadeToggleメソッド
fadeToggleメソッドを使うと、各要素の高さを操作して、fadeOutメソッドとfadeInメソッドを交互に実行します。引数には非表示にする際の時間と、コールバック関数を指定できます。

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

[fadeToggle() - jQuery 日本語リファレンス][fadeToggle]
[fadeToggle]:http://js.studio-kingdom.com/jquery/effects/fade_toggle

###３－３．slideToggleメソッド
slideToggleメソッドを使うと、各要素の高さを操作して、slideDownメソッドとslideUpメソッドを交互に実行します。引数には非表示にする際の時間と、コールバック関数を指定できます。

```js
$(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メソッドの動きとほぼ変わりません。

```js
$(function () {
    $('button').on('click', () => {
        $('img').animate({ width: 'hide' }, 'slow');   // 上に非表示
        $('img').animate({ width: 'show' }, 'slow');   // 下に表示
        $('img').animate({ width: 'toggle' }, 'slow'); // 上下に表示・非表示
    });
});
```

※opacity と併用することで、透明にしながら折りたたむことも可能です。

```js
$(function () {
    $('button').on('click', () => {
        $('img').animate(
            { 
                height: 'width', // 要素の表示・非表示
                opacity: 'width' // 透明・不透明の切り替え
            }, 
            'slow' 
        ); 
    });
});
```

###４ー２．横方向の表示・非表示

aminateメソッドの1つ目の引数である properties 内を、{ width: *** } に指定することで、横方向の出現や隠す動作を行えます。「 *** 」には、hide・show・toggle などを指定します。

動き方としては、左方向に動きながら消え、右方向に動きながら出現します。

```js
$(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/


```js
$( 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/