CODEWITHSUNDEEP
jqueryhtmlcsssliderfade
ShibinRagh
ShibinRagh

Reputation: 6646

jQuery cycle2 - fade/fadout content overlap issue

Please checkout JSFiddle

<div class="right-panel">
        <div class="cycle-slideshow testimonials"
        data-cycle-fx="fadeout"
         data-cycle-speed=3500
         data-cycle-timeout=1000
         data-cycle-slides="> blockquote"
        >

How to avoid content overlapping issue when slider fadeIn/Out

Upvotes: 1

Views: 1868

Answers (4)

Luke
Luke

Reputation: 5612

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="&gt; 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 &gt; 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).

Upvotes: 0

mahega
mahega

Reputation: 3321

Check this out: http://jsfiddle.net/Mbs46/

.right-panel blockquote{
background-color:#fff;
    height:100%;
}

Upvotes: 1

Binita Lama
Binita Lama

Reputation: 1278

Can try this..Working Fiddle

A few updates been made in html.

.right-panel div{
background:#fff;
}

Upvotes: 2

Barry Meijer
Barry Meijer

Reputation: 760

The content overlapping is happening because of the slow animation speed (data-cycle-speed). The extra reason you are seeing the overlap is because of the lack of a background of the blockquote elements. I updated your fiddle so that the animation is faster en the blockquote has a background color: http://jsfiddle.net/veritas87/qLQv5/1/

You can set the rotation speed (how long slides are staying on screen) with the data-cycle-timeout: 

data-cycle-speed=500
data-cycle-timeout=3000

Upvotes: 1

Related Questions