bootstrap旋转木马字幕动画仅在第二张幻灯片上激活

Question

我正在使用自举旋转木马，在其中显示图像，然后标题从几秒钟后从右侧滑入。 它的工作原理，但第一张幻灯片有一个问题，它显示第一张幻灯片的标题，当它移动到第二张时，它仅在一秒钟后隐藏，然后新的标题滑入。

这是我的代码：

<div class="carousel-inner"> 

<div class="item active"> 
    <img src="test.png" alt="Chicago"> 
    <div class="carousel-caption"> 
    <div class="carousel-caption-inner" data-interval="2000"> 
     <p class="slider-text small"><span class="slider-padding">what makes</span> us <span class="slider-green" id="banner-change">specialists?</span></p> 
    <p class="slider-text">We just do ip</p> 
     <p class="slider-text"><span class="slider-green">exceptionally</span></p> 
    </div> 
</div> 
    </div> 
    <div class="item"> 
    <img src="test.png" alt="Chicago"> 
    <div class="carousel-caption"> 
    <div class="carousel-caption-inner"> 
     <p class="slider-text small"><span class="slider-padding">what makes</span> us <span class="slider-green">distinctive?</span></p> 
    <p class="slider-text">Market leading</p> 
     <p class="slider-text"><span class="slider-green"> brought to life</span> and outside london</p> 
    </div> 
</div> 
    </div> 
    <div class="item"> 
    <img src="test.png" alt="Chicago"> 
    <div class="carousel-caption"> 
    <div class="carousel-caption-inner"> 
     <p class="slider-text small"><span class="slider-padding">what makes</span> us <span class="slider-green">stand out?</span></p> 
     <p class="slider-text">The <span class="slider-green">only way</span> to do great work is to love what you do</p> 
    </div> 
</div> 
    </div> 



<div class="item"> 
    <img src="test.png" alt="Los Angeles"> 
    <div class="carousel-caption"> 
    <div class="carousel-caption-inner"> 
     <p class="slider-text small"><span class="slider-padding">what makes</span> us <span class="slider-green">the right choice?</span></p> 
    <p class="slider-text">holistic thinking,<span class="slider-green"> made real</span></p> 

    </div> 
</div> 
    </div> 

<div class="item"> 
    <img src="test.png" alt="New York"> 
<div class="carousel-caption"> 
    <div class="carousel-caption-inner"> 
     <p class="slider-text small"><span class="slider-padding">what makes</span> us <span class="slider-green">effective?</span></p> 
    <p class="slider-text">Intellectual property</p> 
     <p class="slider-text">- <span class="slider-green"> brought to life</span></p> 
    </div> 
</div> 
    </div> 
    </div> 
    </div> 

和：

<script type="text/javascript"> 
    var carouselContainer = $('.carousel'); 
    var slideInterval = 3000; 

    $(document).ready(function() {  
    function toggleCaption() { 
    $('.carousel-caption').hide(); 
     var caption = 
     carouselContainer.find('.active').find('.carousel- 
     caption'); 
     caption.delay(1000).toggle("slide", {direction:'right'}); 
     } 

carouselContainer.carousel({ 
interval: slideInterval, 
cycle: true, 
pause: "hover" 
    }).on('slid.bs.carousel', function() { 
    toggleCaption(); 
    }); 

}); 
</script> 

任何人都知道我怎么能解决这个问题？看来这个功能只在第二张幻灯片上激活，而不是第一张。

Answer 1

使用https://daneden.github.io/animate.css/这样。 您只需更改数据动画属性中的动画类。

(function($) { 
 

 
\t //Function to animate slider captions 
 
\t function doAnimations(elems) { 
 
\t \t //Cache the animationend event in a variable 
 
\t \t var animEndEv = 'webkitAnimationEnd animationend'; 
 
\t \t 
 
\t \t elems.each(function() { 
 
\t \t \t var $this = $(this), 
 
\t \t \t \t $animationType = $this.data('animation'); 
 
\t \t \t $this.addClass($animationType).one(animEndEv, function() { 
 
\t \t \t \t $this.removeClass($animationType); 
 
\t \t \t }); 
 
\t \t }); 
 
\t } 
 
\t 
 
\t //Variables on page load 
 
\t var $myCarousel = $('#carousel-1-z'), 
 
\t \t $firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']"); 
 
\t \t 
 
\t //Initialize carousel 
 
\t $myCarousel.carousel(); 
 
\t 
 
\t //Animate captions in first slide on page load 
 
\t doAnimations($firstAnimatingElems); 
 
\t 
 
\t //Pause carousel 
 
\t $myCarousel.carousel('pause'); 
 
\t 
 
\t 
 
\t //Other slides to be animated on carousel slide event 
 
\t $myCarousel.on('slide.bs.carousel', function (e) { 
 
\t \t var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']"); 
 
\t \t doAnimations($animatingElems); 
 
\t }); 
 
\t 
 
})(jQuery);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="my-carosuel"> 
 
    \t <div id="carousel-1-z" class="carousel slide"> 
 
      <!-- Indicators --> 
 
      <ol class="carousel-indicators"> 
 
      <li data-target="#carousel-1-z" data-slide-to="0" class="active"></li> 
 
      <li data-target="#carousel-1-z" data-slide-to="1"></li> 
 
      <li data-target="#carousel-1-z" data-slide-to="2"></li> 
 
      </ol> 
 
<div class="carousel-inner"> 
 
<!-- Wrapper for slides --> 
 
      <div class="carousel-inner" role="listbox"> 
 
    
 
      
 
      <!-- First slide --> 
 
      <div class="item active"> 
 
       <img src="http://www.placehold.it/1000x400" class="img-responsive"> 
 
       <div class="carousel-caption"> 
 
       <h3 data-animation="animated bounceInLeft" class="heading-active"> 
 
       \t <a href="">animation test one</a> 
 
       </h3> 
 
       <h3 data-animation="animated flip"> 
 
       \t <a href="">animation test two</a> 
 
       </h3> 
 
       <h3 data-animation="animated slideInDown"> 
 
       \t <a href="">animation test three</a> 
 
       </h3> 
 
       </div> 
 
      </div><!-- /.item --> 
 
    
 
      <!-- Second slide --> 
 
      <div class="item"> 
 
       <img src="http://www.placehold.it/1000x400" class="img-responsive"> 
 
       <div class="carousel-caption"> 
 
       <h3 data-animation="animated bounceInLeft" class="heading-active"> 
 
       \t <a href="">animation test one</a> 
 
       </h3> 
 
       <h3 data-animation="animated flip"> 
 
       \t <a href="">animation test two</a> 
 
       </h3> 
 
       <h3 data-animation="animated slideInDown"> 
 
       \t <a href="">animation test three</a> 
 
       </h3> 
 
       </div> 
 
      </div><!-- /.item --> 
 
    
 
      </div><!-- /.carousel-inner --> 
 
      <!-- Controls --> 
 
      <a class="left carousel-control" href="#carousel-1-z" role="button" data-slide="next"> 
 
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
      <span class="sr-only">Next</span> 
 
      </a> 
 
      <a class="right carousel-control" href="#carousel-1-z" role="button" data-slide="next"> 
 
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
      <span class="sr-only">Next</span> 
 
      </a> 
 
     </div><!-- /.carousel --> 
 
    </div>