jquery - Bootstrap 轮播字幕动画

Question

我正在尝试在每次幻灯片更改时（包括在初始化时）在轮播中滑动切换标题。实际上它工作得很好，除了悬停时。我想清除我的超时，但这不影响..

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

我相信你在超时时有点过于复杂了，你可以简单地使用slidans的事件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');

演示小提琴