猫头鹰旋转木马字幕动画

Question

我想让div.caption>div在每次点击下一个按钮时都具有fadeIn效果。

我已经添加了wow.js和animate.css来添加效果。现在，我想让所有带有。wow类的div动画化。问题是我只看到了第一种效果。其他的可以正常工作，但我没有看到它，因为效果在同一时间开始，我希望效果在他的项目开始。

http://jsfiddle.net/masfi/hpw4tuz7/5/

我使用的代码:

<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item" >
    <div class="caption">
        <div class="fadeIn wow" data-wow-delay="0.1s">
            <p>111</p>
        </div>
        <div class="fadeIn wow" data-wow-delay="0.2s">
            <p>222</p>
        </div>
    </div>
    <img src="http://owlgraphic.com/owlcarousel/demos/assets/owl3.jpg" alt="" />
</div> 
<div class="item">
    <div class="caption">
        <div class="fadeInUp wow" data-wow-delay="0.1s">
             <p>111</p>
        </div>
        <div class="fadeInUp wow" data-wow-delay="0.2s">
              <p>222</p>
        </div>
        <div class="fadeIn wow" data-wow-delay="0.3s">
              <p>333</p>
        </div>
    </div>
    <img src="http://owlgraphic.com/owlcarousel/demos/assets/owl2.jpg" alt="" />
</div>
<div class="item">
    <div class="caption">
        <div class="fadeIn wow" data-wow-delay="0.1s">
            <p>111</p>
        </div>
        <div class="fadeIn wow" data-wow-delay="0.2s">
            <p>222</p>
        </div>
    </div>
    <img src="http://owlgraphic.com/owlcarousel/demos/assets/owl1.jpg" alt=""/>
</div>
</div>

$(document).ready(function($) {  
var owl = $('#owl-demo');
    owl.owlCarousel({
        items:1,
        loop:true,
        margin:10,
        autoplay:true,
        autoplayTimeout:1000,
        autoplayHoverPause:true
    });
    var wow = new WOW({
    boxClass:     'wow',      // animated element css class (default is wow)
    animateClass: 'animated', // animation css class (default is animated)
    offset:       0,          // distance to the element when triggering the animation (default is 0)
    mobile:       true,       // trigger animations on mobile devices (default is true)
    live:         true,       // act on asynchronously loaded content (default is true)
    callback:     function(box) {
      // the callback is fired every time an animation is started
      // the argument that is passed in is the DOM node being animated
    }
  });
wow.init();
});

Answer 1

你现在可能已经排序了…但如果不是(为了其他人读到这篇文章)，这对我来说很有用:

$('.owl-carousel').owlCarousel({
    addClassActive: true,
    afterMove: function(){
       var caption = $( ".owl-item.active .caption" ).detach();
       caption.appendTo(".owl-item.active > div");
    }
});