title: Owl Carousel 2 animation not work
body: <p>I have followed this instructions, but the slider not do the fadeOut and fadeIn animation: <a href="http://www.owlcarousel.owlgraphic.com/demos/animate.html" rel="nofollow">http://www.owlcarousel.owlgraphic.com/demos/animate.html</a></p>
  
  <p><strong>Head Css:</strong></p>
  
  <pre><code>&lt;link rel="stylesheet" href="css/animate.css"&gt;
  &lt;link rel="stylesheet" href="css/owl.carousel.css"&gt;
  </code></pre>
  
  <p><strong>Html item:</strong></p>
  
  <pre><code>&lt;div id="product-designs-presentation" class="owl-carousel"&gt;
      &lt;div style="width:186px"&gt;
          &lt;img src="svg/shirt-design-1.svg" alt=""&gt;a
      &lt;/div&gt;
      &lt;div style="width:186px"&gt;
          &lt;img src="svg/shirt-design-2.svg" alt=""&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>&lt;script type="text/javascript" src="js/owl.carousel.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $( document ).ready(function() {
      $('#product-designs-presentation').owlCarousel({
          animateOut: 'fadeOut',
          animateIn: 'fadeIn',
          items:1,
          autoPlay:true,
          autoPlayTimeout:1000,
          autoplayHoverPause:true,
          navigation: true,
          navigationText: ["prev","next"]
      });
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>What is the problem?</p>