javascript - 动画 Bootstrap 轮播标题和按钮

Question

在旋转木马中，想要为标题和按钮添加动画效果，下面是我从 this jsfiddle 复制的代码但在我的 jsfiddle 中，动画不起作用，事实上幻灯片也没有显示。

HTML

<!-- Wrapper for slides -->
 <div class="carousel-inner">
<div class="item active">
  <img src="http://placehold.it/1200x400" alt="...">
  <div class="carousel-caption">
      <h3 class="toggleHeading">Caption Text</h3>
      <p class="toggleCaption">This is some text<p>
  </div>
</div>
  <div class="item">
  <img src="http://placehold.it/1200x400" alt="...">
  <div class="carousel-caption">
      <h3 class="toggleHeading">Caption Text 2</h3>
       <p class="toggleCaption">This is some text<p>
  </div>
  </div>
     <div class="item">
   <img src="http://placehold.it/1200x400" alt="...">
  <div class="carousel-caption">
      <h3 class="toggleHeading">Caption Text 3</h3>
       <p class="toggleCaption">This is some text<p>
  </div>
</div>
</div>

 <!-- Controls -->
 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left"></span>
</a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->

JS

  var carouselContainer = $('.carousel');
   var slideInterval = 5000;

function toggleH(){
    $('.toggleHeading').hide()
    var caption = carouselContainer.find('.active').find('.toggleHeading').addClass('animated fadeInRight').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
        function (){
        $(this).removeClass('animated fadeInRight')});
caption.slideToggle();
}

function toggleC(){
    $('.toggleCaption').hide()
    var caption = carouselContainer.find('.active').find('.toggleCaption').addClass('animated fadeInUp').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
        function (){
        $(this).removeClass('animated fadeInUp')
});
caption.slideToggle();
}
  carouselContainer.carousel({
  interval: slideInterval, cycle: true, pause: "hover"})
 .on('slide.bs.carousel slid.bs.carousel', toggleH).trigger('slide.bs.carousel')
 .on('slide.bs.carousel slid.bs.carousel', toggleC).trigger('slide.bs.carousel');

CSS

 .toggleHeading {
animation-delay: 0.5s;
 -webkit-animation-delay: 0.5s;
 -moz-animation-delay: 0.5s;
   -o-animation-delay: 0.5s;
   -moz-transition: none !important;
}

 .toggleCaption {
animation-delay: 1.5s;
 -webkit-animation-delay: 1.5s;
 -moz-animation-delay: 1.5s;
   -o-animation-delay: 1.5s;
   -moz-transition: none !important;
 }

Please check this fiddle with my code这并没有相应地起作用。

Answer 1

更新有延迟

调整 HTML 并将标题和按钮移动到它们自己的 div 中，以便 CSS 适本地应用延迟动画。

HTML:

 <!-- Header Carousel -->
<header id="myCarousel" class="carousel slide">
    <!-- Indicators -->
    <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>
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="http://placehold.it/1200x400" alt="...">
            <div class="carousel-caption">
                <div class="toggleCaption">
                     <h3>Caption Text</h3>
                </div>
                <div class="toggleButton">
                    <p><a class="btn btn-default-outline btn-lg" role="button">Shop Now</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="http://placehold.it/1200x400" alt="...">
            <div class="carousel-caption">
                <div class="toggleCaption">
                     <h3>Caption Text</h3>
                </div>
                <div class="toggleButton">
                    <p><a class="btn btn-default-outline btn-lg" role="button">Shop Now</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="http://placehold.it/1200x400" alt="...">
            <div class="carousel-caption">
                <div class="toggleCaption">
                     <h3>Caption Text</h3>
                </div>
                <div class="toggleButton">
                    <p><a class="btn btn-default-outline btn-lg" role="button">Shop Now</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>

    </div>
    <!-- Carousel -->

CSS:

.toggleCaption {
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    -moz-transition: none !important;
}
.toggleButton {
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    -o-animation-delay: 1.5s;
    -moz-transition: none !important;
}

JS:

$(document).ready(function () {
    var carouselContainer = $('.carousel');
    var slideInterval = 5000;

    function toggleH() {
        $('.toggleCaption').hide()
        var caption = carouselContainer.find('.active').find('.toggleCaption').addClass('animated fadeInRight').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',

        function () {
            $(this).removeClass('animated fadeInRight')
        });
        caption.slideToggle();
    }

    function toggleC() {
        $('.toggleButton').hide()
        var button = carouselContainer.find('.active').find('.toggleButton').addClass('animated fadeInUp').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',

        function () {
            $(this).removeClass('animated fadeInUp')
        });
        button.slideToggle();
    }
    carouselContainer.carousel({
        interval: slideInterval,
        cycle: true,
        pause: "hover"
    })
        .on('slide.bs.carousel slid.bs.carousel', toggleH).trigger('slide.bs.carousel')
        .on('slide.bs.carousel slid.bs.carousel', toggleC).trigger('slide.bs.carousel');
});

fiddle :http://jsfiddle.net/5Lwyc6rb/1/