Fade in and the owl carousel effect does not work

Question

    <script>
    $(document).ready(function () {
          $("#owl-demo").owlCarousel({
              navigation: true,
              navigationText: ["", ""],
              slideSpeed: 300,
              paginationSpeed: 400,
              autoPlay: true,
              mouseDrag: true,
              singleItem: true,
              animateIn: 'fadeIn',
              animateOut: 'fadeOut'
          });
      });
    </script>

Above my quotation mark of an owl, I want the effect of fading and exiting, but it does not seem to appear. Instead, it looks like a sliding effect.

Answer 1

I do not think that there is any option for switching to a gradual transition:

transitionStyle: "fade" // not available in the docs

another option is to use animate.cssin connection with this:

$("#owl-demo").owlCarousel({
  navigation: true,
  navigationText: ["", ""],
  slideSpeed: 300,
  paginationSpeed: 400,
  autoPlay: true,
  mouseDrag: true,
  singleItem: true,
  animateIn: 'fadeIn', // add this
  animateOut: 'fadeOut' // and this
});

Answer 2

I wonder which version you are using. Your sample code uses versions from version 1.3. * AND 2. *.

Starting from version 2. * you need:

animateIn: 'fadeIn',
animateOut: 'fadeOut',

http://www.owlcarousel.owlgraphic.com/demos/animate.html

In version 1.3. * you need:

transitionStyle: "fade"

http://owlgraphic.com/owlcarousel/demos/transitions.html