TweenMaxを使用して文字をfadeInさせたい

###実現したいこと
・TweenMaxを使用して文字をfadeInさせたいです。
・カルーセルのキャプションの文字をスライドさせたタイミングで、文字を徐々に浮き上がらせる感じです。

###試したこと
公式サイトから以下CDNを</body>直前に埋め込みました。

また、以下コードを記述しました。
main.js

$(function() {
    $(left carousel-control).on("click",function() {
            TweenMax.to("carousel-caption" , 1 , {autoAlpha:0});
        }
    });
});
$(function() {
    $(right carousel-control).on("click",function() {
            TweenMax.to("carousel-caption" , 1 , {autoAlpha:0});
        }
    });
});

###現象
キャプションに入れてある文章がそのまま表示されている状態で、fadeInされません。

###ソースコード
index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <title>タイトル</title>
    <style type="text/css">
        .box {
            background-color: #000000;
            height: 500px;
        }
    </style>
</head>
<body>
<div class="box"></div>
<section class="carousel-size">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" 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-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>
<div class="box"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
</body>
</html>

上記の情報で何か分かりましたら、アドナイスいただけますでしょうか。
↓公式サイト
https://greensock.com/tweenmax
以上、よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

bootstrapのCarouselを使用しているとの事なので、Carouselにあるイベントを使ってみてはどうでしょうか？

以下のコードはスライダーが動く寸前に文章のopacityを0にして、スライダーが完了したら表示されている文章のopacityを1にしています。

js
1$(function(){
2
3//次にスライドする時に発生するイベント
4    $("#carousel-example-generic").on('slide.bs.carousel', function () {
5        TweenMax.set('.carousel-caption',{autoAlpha:0});
6    });
7
8//スライドが完了した時に発生するイベント
9   $("#carousel-example-generic").on('slid.bs.carousel', function () {
10     TweenMax.to('.active .carousel-caption',3,{
11      autoAlpha:1,
12      });
13    });
14});