引导轮播字幕动画

Question

I'm trying to slideToggle the caption within my carousel on each slide change (including on init). Actually it works well except when hovering. I'd like to clear my timeout but it doesn't affect..

http://jsfiddle.net/M63jw/

<script type='text/javascript'>
$(document).ready(function () {

    var carouselContainer = $('.carousel');
    var slideInterval = 3000;
    var carouselTimeout;

    carouselContainer
      .on('slid', function(){
        var caption = $(this).find('.active').find('.carousel-caption');

        caption.slideToggle();

        var carouselTimeout = setTimeout(function(){
          carouselTimeout = false;
          caption.slideToggle();
        }, slideInterval);

      })
      .on('slide', function(){
        if(carouselTimeout){
          clearTimeout(carouselTimeout);
          carouselTimeout = false;
        }
      });

    carouselContainer.carousel({
        interval: slideInterval,
        cycle: true,
        pause: "hover"
      }).trigger('slid');

    carouselContainer.hover(function(){
      clearTimeout(carouselTimeout);
      carouselTimeout = false;
    });

});
</script>

Any suggestions?

Answer 1

I believe you over-complicated things a little bit with the timeout, you can simply use the events of slid ans slide to toggle your caption like this:

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

function toggleCaption(){
    var caption = carouselContainer.find('.active').find('.carousel-caption');
    caption.slideToggle();
}

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

Demo fiddle