猫头鹰旋转木马字幕动画答案

【问题标题】：owl-carousel caption animated猫头鹰旋转木马字幕动画
【发布时间】：2015-06-04 13:25:35
【问题描述】：

我想在每次单击下一个按钮时为 div.caption>div 设置动画效果。

我添加了 wow.js 和 animate.css 来添加效果。现在，我想为所有具有 .wow 类的 div 设置动画。问题是我只看到第一个效果。其他的效果很好，但我看不到，因为效果是同时开始的，我希望效果在他的项目中开始。

我使用的代码：

<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();
});

【问题讨论】：

我不清楚你的问题是什么。通过事件change.owl.carousel 看来您使用的是 2.0 版测试版。我试图对您的问题进行演示，但看起来很奇怪（jsfiddle.net/milz/9mqxkymb）。您可以尝试发布您的问题的小提琴吗？此外，您的 HTML 无效。您正在尝试用<p/> 关闭</p>，而您在一些img 标签上缺少一些/
这里是：jsfiddle.net/masfi/hpw4tuz7/5 我已经添加了 wow.js 和 animate.css 来添加效果。现在，我想为所有具有 .wow 类的 div 设置动画。问题是我只看到第一个效果。其他的工作正常，但我看不到它，因为效果是同时开始的，我希望效果在他的项目中开始。我可以用 owlcarousel.owlgraphic.com/docs/api-events.html 来做吗？

标签： owl-carousel animate.css

【解决方案1】：

您现在可能已经对此进行了排序...但如果没有（并且为了其他人阅读本文），这对我有用：

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

【讨论】：