Your issue is caused by the sync
option with its default value of true
in combination with your setting of the fx
option to fadeout
.
From the jQuery Cycle2 API docs:
sync: If true
then animation of the incoming and outgoing slides will be
synchronized. If false
then the animation for the incoming slide will
not start until the animation for the outgoing slide completes.
There is no description provided for the fadeout
transition, but observation indicates that it does just that: fades out. This is in contrast to the default crossfade behaviour which fades the initial slide out and the new slide in. I would have thought using fadeout
would be fine: expected behaviour (with sync
set to false
) would be that the initial slide would fade out and only when finished would the new slide "pop" into appearance. Instead, the new slide appears at the same time that the fadeout begins.
What I would do is let Cycle2 perform its default crossfade effect and set the sync
option to false
. Here is a JSFiddle to demonstrate.
You will note that adding a background to the slides is not required.
HTML:
<div class="right-panel">
<div class="cycle-slideshow testimonials"
data-cycle-speed=3500
data-cycle-timeout=1000
data-cycle-slides="> blockquote"
data-cycle-sync="false">
<blockquote>
<p>Moving Permits is an absolutely essential service for lorem ipsum dolor sit amet manga aliqua.</p>
<cite>- John Doe</cite>
</blockquote>
<blockquote>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<cite>- John Doe</cite>
</blockquote>
</div>
</div>
Note: I encoded >
as >
in the above HTML because SO incorrectly sees it as a closing tag. You are fine to use >
in your actual HTML. (Here's an SO question that addresses this specifically).