引导 3 轮播 :如何更改为字幕制作不同的动画

Question

是否有任何选项可以以其他方式制作轮播动画。 例如，CAPTION 从底部进入并隐藏底部，而不是随滑动图像移动

演示 http://jsfiddle.net/sweetmaanu/M63jw/40/

<div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            <img src="http://www.3dblasphemy.com/personal/MUSTANG_HIGH.jpg">
            <div class="carousel-caption">
                 <h1>Awesome Carousel</h1>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            </div>
        </div>
        <div class="item">
            <img src="http://www.mustang.com/wp-content/uploads/2011/12/1965_mustang_fastback.jpg">
            <div class="carousel-caption">
                 <h1>Awesome Carousel</h1>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            </div>
        </div>
        <div class="item">
            <img src="http://www.3dblasphemy.com/personal/MUSTANG_HIGH.jpg">
            <div class="carousel-caption">
                 <h1>Awesome Carousel</h1>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            </div>
        </div>
    </div>
    <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">&laquo;</a>
 <a class="carousel-control right" href="#myCarousel" data-slide="next">&raquo;</a>
</div>

Answer 1

尝试如下操作：

.carousel-inner > .item .carousel-caption {
   -moz-transition: all 0.1s linear;  
    -o-transition: all 0.1s linear;  
    -webkit-transition: 0.1s linear;  
    -ms-transition: all 0.1s linear;  
    transition: all 0.1s linear;  
}
.carousel-inner > .item .carousel-caption
{
    opacity:0;
    margin-top:100%;
}   
.carousel-inner > .item.active .carousel-caption
{
    opacity:1;
    margin-top:0;
}

或者使用 jQuery：

$('#myCarousel').on('slide', function () {
  $('.carousel-inner > .item .carousel-caption').css('display','none');
})  
$('#myCarousel').on('slid', function () {
  $('.carousel-inner > .item.active .carousel-caption').fadeIn( "slow" );
})