引導輪播字幕動畫

Question

我正在嘗試對每次幻燈片更改（包括init更改）在輪播中切換標題。 實際上，除了將鼠標懸停時，它都可以正常工作。 我想清除超時，但不影響。

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>

有什么建議么？

Answer 1

我相信你過分復雜的事情超時一點點，你可以簡單地使用事件的slid答slide來切換您的標題是這樣的：

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');

演示小提琴