Twitter Bootstrap 2.2 Carousel animations

by ian_smithz

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap.min.css">
<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">
      <img src="http://placehold.it/120x120&text=1" />
      <div class="carousel-caption"><p>111111111</p></div>
    </div>
    <div class="item">
      <img src="http://placehold.it/120x120&text=2" />
      <div class="carousel-caption"><p>222222222</p></div>
    </div>
    <div class="item">
      <img src="http://placehold.it/120x120&text=3" />
      <div class="carousel-caption"><p>333333333</p></div>
    </div>
  </div>
  <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>

  <a
  class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

CSS

#myCarousel .carousel-caption {
  opacity: 0;
  filter: alpha(opacity=0);
}


/* DEMO only */
body {
  padding: 20px;
}
#myCarousel .item img {
  width: 120px;
  height: 120px;
  margin: 0 auto;
}

JavaScript

var $carousel = $('#myCarousel');
    var $carouselCaptions = $carousel.find('.item .carousel-caption');
    var $carouselImages = $carousel.find('.item img');
    var carouselTimeout;
    
    $carousel.on('slid', function () {
        var $item = $carousel.find('.item.active');
        carouselTimeout = setTimeout(function() { // start the delay
            carouselTimeout = false;
            $('.carousel-caption', $item).animate({'opacity': 1}, 500);
            $('img', $item).animate({'opacity': 0.2}, 500);
        }, 2000);
    }).on('slide', function () {
        if(carouselTimeout) { // Carousel is sliding, stop pending animation if any
            clearTimeout(carouselTimeout);
            carouselTimeout = false;
        }
        // Reset styles
        $carouselCaptions.animate({'opacity': 0}, 500);
        $carouselImages.animate({'opacity': 1}, 500);
    });;
    
    $('#myCarousel').carousel({
        interval: 6000,
        cycle: true,
    }).trigger('slid'); // Make the carousel believe that it has just been slid so that the first item gets the animation