jQuery轮播标题动画在jsfiddle中工作正常，但不在括号中

Question

在jsfiddle中它显示的方式完全相同，但在括号编辑器中显示动画轮播字幕fadeInUp

jsfiddle which is working the way i wanted

但是当我在括号编辑器中尝试相同的代码时，它会显示轮播标题fadeInUp而不是显示fadeInRight中的轮播标题和来自fadeInUp的轮播按钮。

check brackets editor here

                                                                      

    <!-- Wrapper for slides -->
    <div class="carousel-inner">

        <!--first slide-->
        <div class="item active">
            <img src="image/stylegirl.jpg" style="width:100%">
            <div class="carousel-caption">
                <div class="toggleCaption">
                <h1>Discounts upto 50% off</h1>

                <div class="toggleButton">
    <p><a class="btn btn-default-outline btn-lg" role="button"> Shop Now</a></p>
            </div>
        </div>
        </div>
        </div>


        <!--second slide-->
        <div class="item">
            <img src="image/couple.jpg" style="width:100%">
            <div class="carousel-caption">
                <div class="toggleCaption">
                <h1>On Sale</h1>

                <div class="toggleButton">
      <p><a class="btn btn-default-outline btn-lg" role="button">Shop Now</a></p>
            </div>
        </div>
        </div>
        </div>

        <!--Third Slide-->
        <div class="item">
            <img src="image/glamour.jpg" style="Width:100%">
            <div class="carousel-caption">
                <div class="toggleCaption">
                <h1>New Arrivals</h1>

                <div class="toggleButton">
      <p><a class="btn btn-default-outline btn-lg" role="button"> Shop Now</a></p>
            </div>
        </div>
        </div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
    </a>
</header>