Question

每次点击下一个按钮，我想用fadeIn效果为div.caption＆gt; 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();
});

Answer 1

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

＆＃13;

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

＆＃13;

猫头鹰 - 旋转木马标题动画

1 个答案: