animate.css - owl-carousel caption animated -
i want animate div.caption>div fadein effect every time click on next button.
i've added wow.js , animate.css add effects. now, want animate divs have .wow class. problem see first effect. others works fine don't see because effects starts @ same time, , want effect start in item.
http://jsfiddle.net/masfi/hpw4tuz7/5/
the code use:
<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 wow) animateclass: 'animated', // animation css class (default animated) offset: 0, // distance element when triggering animation (default 0) mobile: true, // trigger animations on mobile devices (default true) live: true, // act on asynchronously loaded content (default true) callback: function(box) { // callback fired every time animation started // argument passed in dom node being animated } }); wow.init(); });
you've sorted now... if not (and sake of others reading this), worked me:
$('.owl-carousel').owlcarousel({ addclassactive: true, aftermove: function(){ var caption = $( ".owl-item.active .caption" ).detach(); caption.appendto(".owl-item.active > div"); } });
Comments
Post a Comment