Bootstrap 轮播文本淡入淡出答案

【问题标题】：Bootstrap Carousel Text FadeBootstrap 轮播文本淡入淡出
【发布时间】：2013-07-26 12:38:24
【问题描述】：

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

【问题讨论】：

【解决方案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 版），但现在是时候为未来编写代码了！

【讨论】：

喜欢纯 CSS 解决方案。记住也要考虑.item.prev。要与 animate.css 库结合使用，请使用 display:none 而不是 opacity:0；

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

对于 Bootstrap 3 来说是

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

【讨论】：

【解决方案4】：

这行得通...它仍然可以与轮播一起滑动，但您确实会获得淡出和淡入效果。

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

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

Here is a fiddle 演示。

【讨论】：