title: owl-carousel caption animated
body: <p>I want to animate div.caption>div with fadeIn effect every time I click on the next button. </p>
  
  <p>I've added wow.js and animate.css to add effects. Now, I want to animate all divs that have .wow class. The problem is that I only see the first effect. The others works fine but I don't see it because the effects starts all at the same time, and I want the effect start in his item.</p>
  
  <p><a href="http://jsfiddle.net/masfi/hpw4tuz7/5/" rel="nofollow">http://jsfiddle.net/masfi/hpw4tuz7/5/</a></p>
  
  <p>The code I use:</p>
  
  <pre><code>&lt;div id="owl-demo" class="owl-carousel owl-theme"&gt;
  &lt;div class="item" &gt;
      &lt;div class="caption"&gt;
          &lt;div class="fadeIn wow" data-wow-delay="0.1s"&gt;
              &lt;p&gt;111&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="fadeIn wow" data-wow-delay="0.2s"&gt;
              &lt;p&gt;222&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;img src="http://owlgraphic.com/owlcarousel/demos/assets/owl3.jpg" alt="" /&gt;
  &lt;/div&gt; 
  &lt;div class="item"&gt;
      &lt;div class="caption"&gt;
          &lt;div class="fadeInUp wow" data-wow-delay="0.1s"&gt;
               &lt;p&gt;111&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="fadeInUp wow" data-wow-delay="0.2s"&gt;
                &lt;p&gt;222&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="fadeIn wow" data-wow-delay="0.3s"&gt;
                &lt;p&gt;333&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;img src="http://owlgraphic.com/owlcarousel/demos/assets/owl2.jpg" alt="" /&gt;
  &lt;/div&gt;
  &lt;div class="item"&gt;
      &lt;div class="caption"&gt;
          &lt;div class="fadeIn wow" data-wow-delay="0.1s"&gt;
              &lt;p&gt;111&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="fadeIn wow" data-wow-delay="0.2s"&gt;
              &lt;p&gt;222&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;img src="http://owlgraphic.com/owlcarousel/demos/assets/owl1.jpg" alt=""/&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  $(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();
  });
  </code></pre>