Bootstrap Carousel Text Fade

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

这很有用......它仍然与旋转木马一起滑动，但你确实得到了fadeOut和fadeIn效果。

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

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

Here is a fiddle演示。

Answer 4

使用jQuery将功能附加到＆＃39;滑动＆＃39;并且＆＃39; slide＆＃39;事件...

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

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