カルーセルのキャプションを個別で指定したい

Question

###実現したいこと
左右のインディケータをクリックする以下のタイミングでキャプション文字をfadeInさせたいです。
カルーセルのスライドは4枚あります。1枚目のスライドのインディケータをクリックすると2枚目のキャプション文字がfadeInし、2枚目のスライドのインディケータをクリックをすると3枚目のキャプションがfadeInし...という流れを実装したいです。
###現状
1枚目に表示されているスライドのインディケータをクリックすると2枚目のスライドの文字がfadeInしているのは良いのですが、3枚目と4枚目のスライドも、1枚目のスライドのインディケータをクリックするタイミングでfadeInしてしまいます。
js

    $(function() {
        $(".carousel-caption").fadeIn();
        $("#carousel-example-generic").on("slide.bs.carousel",function() {
          $(".carousel-caption").fadeOut("fast");
        });
        $("#carousel-example-generic").on("slid.bs.carousel",function() {
          $(".carousel-caption").fadeIn(5000);
        });
    });

html

<section class="carousel-size">
        <div id="carousel-example-generic" class="carousel slide">
            <div class="carousel-inner">
                <div class="item active">
                    <img src="images/slide1.jpg" alt="slide1" width="100%">
                    <div class="carousel-caption">
                        文章
                    </div>
                </div>
                <div class="item">
                    <img src="images/slide2.jpg" alt="slide2" width="100%">
                    <div class="carousel-caption">
                        文章
                    </div>
                </div>
                <div class="item">
                    <img src="images/slide3.jpg" alt="slide3" width="100%">
                    <div class="carousel-caption">
                        文章
                    </div>
                </div>
                <div class="item">
                    <img src="images/slide4.jpg" alt="slide4" width="100%">
                    <div class="carousel-caption">
                        文章
                    </div>
                </div>
            </div>
            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
    </section>

###問題点
コーディングを確認すると確かに上記の動きになることは理解できるのですが、どのようにコーディングすれば「実現したいこと」に記載したような動きになるか、わかりません。
###試したこと
各キャプションに番号を割り当てユニークなクラスにし、それぞれ同様のコーディングをしました。
しかし、文字が表示されなくなりました。画像の表示、スライドは正常です。
js

    $(function() {
        $(".carousel-caption2").fadeIn();
        $("#carousel-example-generic").on("slide.bs.carousel",function() {
          $(".carousel-caption2").fadeOut("fast");
        });
        $("#carousel-example-generic").on("slid.bs.carousel",function() {
          $(".carousel-caption2").fadeIn(5000);
        });
    });
    $(function() {
        $(".carousel-caption3").fadeIn();
        $("#carousel-example-generic").on("slide.bs.carousel",function() {
          $(".carousel-caption3").fadeOut("fast");
        });
        $("#carousel-example-generic").on("slid.bs.carousel",function() {
          $(".carousel-caption3").fadeIn(5000);
        });
    });
    $(function() {
        $(".carousel-caption4").fadeIn();
        $("#carousel-example-generic").on("slide.bs.carousel",function() {
          $(".carousel-caption4").fadeOut("fast");
        });
        $("#carousel-example-generic").on("slid.bs.carousel",function() {
          $(".carousel-caption4").fadeIn(5000);
        });
    });

html

<section class="carousel-size">
        <div id="carousel-example-generic" class="carousel slide" data-interval="8000">
            <div class="carousel-inner">
                <div class="item active">
                    <img src="images/slide1.jpg" alt="slide1" width="100%">
                    <div class="carousel-caption">
                        文章
                    </div>
                </div>
                <div class="item">
                    <img src="images/slide2.jpg" alt="slide2" width="100%">
                    <div class="carousel-caption2">
                        文章
                    </div>
                </div>
                <div class="item">
                    <img src="images/slide3.jpg" alt="slide3" width="100%">
                    <div class="carousel-caption3">
                        文章
                    </div>
                </div>
                <div class="item">
                    <img src="images/slide4.jpg" alt="slide4" width="100%">
                    <div class="carousel-caption4">
                        文章
                    </div>
                </div>
            </div>
            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
    </section>

###追記
左右のインディケータをクリックすると、3枚目以降にfadeInした文字が映し出されてからfadeOutするため、期待している動作にならないようです。
よって、fadeOutがスライドする前に実行できれば期待動作になるようにも思えます。

以上、ご確認お願いいたします。

Answer 1

前回、最初に回答した時、「表示されない領域だからいいだろう」と少し楽をさせていただきました。すみません。。

表示されない領域の挙動はまだこちらで確認できていないのですが、

多分これでいけると思います。(html部分は前回までと同様とする)

$(function() {
    $(".active .carousel-caption").fadeIn();
    $("#carousel-example-generic").on("slide.bs.carousel",function() {
      $(".carousel-caption").fadeOut("fast");
    });
    $("#carousel-example-generic").on("slid.bs.carousel",function() {
      $(".active .carousel-caption").fadeIn();
    });
});

activeクラスをもつdiv以下にあるcarousel-captionクラスに該当する要素(一つしかありません。)に対してのみfadeInを実行するように書いてみました。

Comments

[narururu]

namnium1125さん、回答依頼など図々しいことをしてしまい、度々申し訳ございません。
ご回答ありがとうございます。
頂いたコードで期待動作を確認することができました！
本当に本当にありがとうございます。
私もnamnium1125さんのように問題解決できるようにしないとですね。
もう、なんとお礼を申し上げればよいのかわからないですが、本当にありがとうございました！！☺

[namnium1125]

いえいえ、teratailの機能なんですからフル活用してください。

ただいつでも答えられるわけでは無いんで、そこはご了承ください。m(_ _)m

[narururu]

ありがとうございます。
今、どうしても作成したいwebサイトがありまして、全体像はできたんですが、アニメーションのところで行き詰ってしまい、それで質問攻めになってしまい。。
おそらく、ここしばらくはteratail上でアニメーションに関する質問を多く見かけるかもしれませんが、もし見かけましたら、お手すきの際にご回答いただけると大変助かります。