引导轮播字幕动画 [英] Bootstrap Carousel Caption Animation

问题描述

我正在尝试对每次幻灯片更改(包括init更改)在轮播中切换标题.实际上，除了将鼠标悬停时，它都可以正常工作.我想清除超时，但这不会影响.

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>

有什么建议吗?

推荐答案

我相信您会因超时而使事情变得有些复杂，您可以简单地使用slid ans slide的事件来切换标题，例如这个:

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

这篇关于引导轮播字幕动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！