javascript - Bootstrap 轮播文本淡入淡出

Question

是否可以防止引导轮播的标题与背景图像一起滑动，而是在“滑动”时淡出，而在“滑动”时新标题淡入？

Answer 1

我更喜欢使用纯 CSS 解决方案：

.item.next .carousel-caption {
    opacity: 0;
}

.carousel-caption {
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

它确实依赖于 CSS3 过渡，因此在较旧的浏览器中不起作用（对于 IE，这意味着至少版本 10），但现在是时候为未来编写代码了！

Answer 2

对于 Bootstrap 3，它将是

$('#myCarousel').on('slide.bs.carousel',function(){
$('.carousel-caption').fadeOut(300);
})
$('#myCarousel').on('slid.bs.carousel',function(){
 $('.carousel-caption').fadeIn(600);
})

Answer 3

使用 jQuery 将函数附加到 'slide' 和 'slide' 事件...

$('#myCarousel').on('slide',function(){
  $('.carousel-caption').fadeOut(300);
})
$('#myCarousel').on('slid',function(){
  $('.carousel-caption').fadeIn(600);
})

动画演示：http: //bootply.com/69740

Answer 4

这行得通...它仍然可以与旋转木马一起滑动，但是您确实会受到淡出和淡入的影响。

$('#myCarousel').on('slide',function(){
    $('#myCarousel .active .carousel-caption').fadeOut();
});

$('#myCarousel').on('slid',function(){
    $('#myCarousel .active .carousel-caption').fadeIn();
});

这是一个小提琴演示。