Animate the caption Bootstrap 3 carousel

Question

I'm looking for a good way to animate the caption of a Bootstrap 3 carousel. I have found this post Bootstrap carousel-caption animation.

Sadly it doesn't work as it is working in the fiddle. At my page, the animation is not really an animation. The caption pops in and is not flying in. Also the animation only works one time per image. Therefor on a second round through the carousel, the captions are not showing anymore.

My CSS is:

.carousel-caption {
    z-index: 0;
    font-size:24px;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    padding-bottom: 30px;
    padding-top:25%;
    height: 100% !important;
    background:rgba(0, 0, 0, 0.25);   
    display: none;
}

My JS:

var carouselContainer = $('.carousel');
    var slideInterval = 5000;

    function toggleCaption() {
        $('.carousel-caption').hide();
        var caption = carouselContainer.find('.active').find('.carousel-caption');
        caption.delay(500).toggle("slide", {direction:'right'});
    }


    carouselContainer.carousel({
        interval: slideInterval,
        cycle: true,
        pause: "hover"
    }).on('slid.bs.carousel', function() {
        toggleCaption();
    });

You can see the site here

Answer 1

I had the same issue and finally got a solution!

I am only a beginner with Jquery, so I'm sure you can clean that bit up. Also, probably best to use your own Carousal Structure and just use the 2 classes for the captions you want to animate.

The trick is the use Animate.css but you have to disable the Ease function for Firefox on the animated captions, otherwise it causes issues.

Fiddle Here: http://jsfiddle.net/z6xq12bh/4/

For more animation effects: http://daneden.github.io/animate.css/

HTML:

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="http://placehold.it/1200x400" alt="...">
          <div class="carousel-caption">
              <h3 class="toggleHeading">Caption Text</h3>
              <p class="toggleCaption">This is some text<p>
          </div>
        </div>
        <div class="item">
          <img src="http://placehold.it/1200x400" alt="...">
          <div class="carousel-caption">
              <h3 class="toggleHeading">Caption Text 2</h3>
               <p class="toggleCaption">This is some text<p>
          </div>
        </div>
        <div class="item">
          <img src="http://placehold.it/1200x400" alt="...">
          <div class="carousel-caption">
              <h3 class="toggleHeading">Caption Text 3</h3>
               <p class="toggleCaption">This is some text<p>
          </div>
        </div>
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div> <!-- Carousel -->

JS:

    <script>
    var carouselContainer = $('.carousel');
    var slideInterval = 5000;

        function toggleH(){
            $('.toggleHeading').hide()
            var caption = carouselContainer.find('.active').find('.toggleHeading').addClass('animated fadeInRight').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
                function (){
                $(this).removeClass('animated fadeInRight')});
        caption.slideToggle();
        }

        function toggleC(){
            $('.toggleCaption').hide()
            var caption = carouselContainer.find('.active').find('.toggleCaption').addClass('animated fadeInUp').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
                function (){
                $(this).removeClass('animated fadeInUp')
        });
        caption.slideToggle();
        }
    carouselContainer.carousel({
    interval: slideInterval, cycle: true, pause: "hover"})
    .on('slide.bs.carousel slid.bs.carousel', toggleH).trigger('slide.bs.carousel')
    .on('slide.bs.carousel slid.bs.carousel', toggleC).trigger('slide.bs.carousel');
     </script>

CSS:

    .toggleHeading {
        animation-delay: 0.5s;
      -webkit-animation-delay: 0.5s;
         -moz-animation-delay: 0.5s;
           -o-animation-delay: 0.5s;
           -moz-transition: none !important;
    }

    .toggleCaption {
        animation-delay: 1.5s;
      -webkit-animation-delay: 1.5s;
         -moz-animation-delay: 1.5s;
           -o-animation-delay: 1.5s;
           -moz-transition: none !important;
    }