次のタグをアニメーションで表示非表示にできるようにしました

こんにちは鬱太郎です。先日作ったnext-hiddenを改良しました。良ければ見て言って下さい！

ここをクリックしてください

そう！アニメーションで動作をできるようにしました。

前の記事
改善のコメントありがとうございます。
- end()を使ってメソッドチェーンが書ける
- セレクタ.eachは必須じゃない
今回の改善の流れ
動作デモ
- スライド表示非表示
- フェードイン・アウト表示非表示
ソースコードと使用例
過去の記事も参考に
終わりに

www.neetaro.com

改善のコメントありがとうございます。

f:id:neet-utsu-taro:20171020193643p:plain

要件見た感じもっとコンパクトにできそうな気がするけど気のせいかも

ghostbassさん

コメントありがとうございます！確かにそうですね！つぎのkathewさんのコメントを元にコードを改良したら確かにコンパクトになりました。でも要件追加して、コードが伸びましたｗｗ

eachで回さなくて大丈夫だよ。jQueryでイベントを仕込んだらセレクタにヒットする全ての要素にイベントが適用されるよ/初期状態で非表示化するのは$(セレクタ).next().hide() おすすめ

kathewさん

コメントありがとうございます！そうなんですね！教えていただいてありがとうございます！私はjQueryについて詳しくなくて、逆引きで調べて作って動けばOKみたいな感じでしたので本当に助かりました。

コメントから学んだことを書いていきますね。ありがとうございます。

end()を使ってメソッドチェーンが書ける

end()はjQueryのメソッドの一つです。一つ前の選択状態に戻すという効果があります。

$(".next-hidden").next().hide();

は、hide()のところでは$(".next-hidden).next()を選択しています。end()を付けることで、一つ前の$(".next-hidden")の選択状態に戻すことができます。

$(".next-hidden").next().hide().end().click(function(){
  $(this).next().toggle();
});

こんな感じにつなげて記述することができます。

これをメソッドチェーンと言うらしいです。

セレクタ.eachは必須じゃない

私が逆引きでいろいろとjQueryについて調べていた時に、セレクタ.eachで処理しているコード例が多かったので初めて知りました。nullの場合とかはエラーを吐かないんですね。

今回のコードのように中にif文とか書いてる場合はさすがにeachでいいのかな？

今回の改善の流れ

コメントで指摘を受けて、いろいろとjQueryについて調べているときに、

ん・・？

.toggle() 表示、非表示を切り替える。

デデーン！

そんな便利なものあったのか！

if($(this).next().is(":visible")){
  $(this).next().hide();
}else{
  $(this).next().show();
}

これが

$(this).next().toggle();

一行に！

そして、ふと上を見ると？

アニメーション…だと…？

という事で、next-hiddenはコードがシンプルになった途端にアニメーションも追加できる要件が追加されましたｗ

参考サイト

www.kantenna.com

動作デモ

前回の動作

www.neetaro.com

クリック(タップ)すると次のタグが表示非表示します

前回の動作に加え、新たに二つの動作が追加されました。

スライド表示非表示

jQueryのslideToggle()を使った動作を追加しました。

クリック(タップ)すると次のタグが表示非表示します

フェードイン・アウト表示非表示

jQueryのfadeToggle()を使った動作を追加しました。

クリック(タップ)すると次のタグが表示非表示します

ソースコードと使用例

実際の使い方を説明していきます。

1.スクリプトコードを記事に張りつける

下記コードを使用する記事の中に記述してください。そのまま記法の方はHTML編集タグから追加できます。先頭の1行はjQueryの読み込みコードなので、既にヘッダー等に同様の記述がある場合は不要です。

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
    var classSelector = ".next-hidden";
    var attrForNext = "data-display";
    var attrNextClass = "data-next-class";
    var attrType = "data-type";
    var attrTime = "data-time";
    
    $(classSelector).next().hide().end().each(function(){
        if($(this).next().length){
            var time = $(this).attr(attrTime);
            var toggleArgument = (isNaN(time))?time:Number(time);
            switch($(this).attr(attrType)){
                case "slide":
                $(this).click(function(){
                    $(this).next().slideToggle(toggleArgument);
                });
                break;
                case "fade":
                $(this).click(function(){
                    $(this).next().fadeToggle(toggleArgument);
                });
                break;
                default:
                $(this).click(function(){
                    $(this).next().toggle(toggleArgument);
                });
                break;
            }
            $(this).next().css("display",$(this).attr(attrForNext)).addClass($(this).attr(attrNextClass));          
        }
    });
})
</script>

2.イベントを登録したいタグにクラス名や属性を追加する

ソースコードをコピペした後はタグにクラス名を付けるだけで機能します。

そのまま記法の方は、HTML編集ページから、Markdown記法の方は直接記述できます。

通常の動作

class="next-hidden"を記述することで、そのタグに次のタグを表示非表示にさせるイベントを追加します。このとき、デフォルトで次のタグの要素を非表示にします。

<p class="next-hidden"><a>ここをクリック</a></p>
<p>タグに<code>class="next-hidden"</code>を追加することで、クリックすると次のタグを表示非表示させるイベントを追加できます。</p>

ここをクリック

タグにclass="next-hidden"を追加することで、クリックすると次のタグを表示非表示させるイベントを追加できます。

スライドしつつ表示非表示にさせる

class="next-hidden"を記述し、属性data-type="slide"を追記することで、スライド動作を有効にします。

<p class="next-hidden" data-type="slide"><a>ここをクリック</a></p>
<p>タグに<code>class="next-hidden" data-type="slide"</code>を追加することで、クリックすると次のタグをスライド動作で表示非表示させるイベントを追加できます。</p>

ここをクリック

タグにclass="next-hidden" data-type="slide"を追加することで、クリックすると次のタグをスライド動作で表示非表示させるイベントを追加できます。

フェードしつつ表示非表示にさせる

class="next-hidden"を記述し、属性data-type="fade"を追記することで、フェード動作を有効にします。

<p class="next-hidden" data-type="fade"><a>ここをクリック</a></p>
<p>タグに<code>class="next-hidden" data-type="fade"</code>を追加することで、クリックすると次のタグをフェード動作で表示非表示させるイベントを追加できます。</p>

ここをクリック

タグにclass="next-hidden" data-type="fade"を追加することで、クリックすると次のタグをフェード動作で表示非表示させるイベントを追加できます。

オプション

最初に次のタグを表示しておきたい場合

さらにdata-display="block"という属性を追記することで、初期状態を表示状態にすることができます。通常の動作、スライド動作、フェード動作のすべてに追記することができます。次の例はフェード動作に初期状態を表示させる属性を追加します。

<p class="next-hidden" data-type="fade" data-display="block"><a>ここをクリック</a></p>
<p>タグに<code>data-display="block"</code>を追記することで、クリックすると次のタグを表示非表示させるイベントを追加できます。また、次のタグは最初から表示されます。</p>

ここをクリック

タグにdata-display="block"を追記することで、クリックすると次のタグを表示非表示させるイベントを追加できます。また、次のタグは最初から表示されます。

次のタグにクラスを追加したい場合

さらにdata-next-class="hogehoge"という属性を追記することで、次のタグにclass="hogehoge"を追加します。もちろんhogehogeの部分には好きなクラス名を記述できます。

これも動作に関わらず追記することができます。次の例はスライド動作にクラス名を追加します。

<style>.hogehoge{background-color: gray;}</style>
<p class="next-hidden" data-type="slide" data-next-class="hogehoge"><a>ここをクリック</a></p>
<p>タグに<code>data-next-class="hogehoge"</code>を追加することで、次のタグにクラス名<code>hogehoge</code>を追加できます。この例ではCSSで背景を変更しています。</p>

ここをクリック

タグにdata-next-class="hogehoge"を追加することで、次のタグにクラス名hogehogeを追加できます。この例ではCSSで背景を変更しています。

アニメーション動作にかかる秒数を指定したい場合

全ての動作にかかる時間をミリ秒単位で指定できます。例えば、data-time="3000"を追記することで、表示非表示に掛かる動作を3秒に指定できます。

通常の動作で3秒

<p class="next-hidden" data-time="3000"><a>ここをクリック</a></p>
<p>タグに<code>data-time="3000"</code>を追記することで、クリックすると3秒かけて次のタグを表示非表示させるイベントを追加できます。</p>

ここをクリック

タグにdata-time="3000"を追記することで、クリックすると3秒かけて次のタグを表示非表示させるイベントを追加できます。

スライド動作で3秒

<p class="next-hidden" data-type="slide" data-time="3000"><a>ここをクリック</a></p>
<p>タグに<code>data-time="3000"</code>を追記することで、クリックすると次のタグをスライド動作で3秒かけて表示非表示させるイベントを追加できます。</p>

ここをクリック

タグにdata-time="3000"を追記することで、クリックすると次のタグをスライド動作で3秒かけて表示非表示させるイベントを追加できます。

フェード動作で3秒

<p class="next-hidden" data-type="fade" data-time="3000"><a>ここをクリック</a></p>
<p>タグに<code>data-time="3000"</code>を追記することで、クリックすると次のタグをフェード動作で3秒かけて表示非表示させるイベントを追加できます。</p>