Question

有没有选择以另一种方式制作旋转木马动画。例如CAPTION来自底部并且隐藏底部而不是使用滑动图像移动

DEMO 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" );
})

bootstrap 3 carousel：如何更改为标题制作不同的动画？

1 个答案: