Question

请结帐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"
        >

滑块淡入/淡出

时如何避免内容重叠问题

Answer 1

可以尝试这个.. Working Fiddle

在html中进行了一些更新。

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

Answer 2

由于动画速度慢（数据循环速度），内容重叠正在发生。您看到重叠的额外原因是因为缺少blockquote元素的背景。我更新了你的小提琴，以便动画更快，而blockquote有一个背景颜色：http://jsfiddle.net/veritas87/qLQv5/1/

您可以使用data-cycle-timeout设置旋转速度（幻灯片停留在屏幕上的时间）：

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

Answer 3

检查出来：http://jsfiddle.net/Mbs46/

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

Answer 4

您的问题是由sync选项引起的，默认值为true，并且fx选项设置为fadeout。

来自jQuery Cycle2 API文档：

同步：如果true，则会显示传入和传出幻灯片的动画同步。如果是false，那么传入幻灯片的动画就会出现在传出幻灯片的动画完成之前不会启动。

没有为fadeout转换提供描述，但观察表明它确实如此：淡出。这与默认的交叉淡化行为形成对比，后者淡化了初始幻灯片和新幻灯片。我原本认为使用fadeout会很好：预期的行为（sync设置为false可能是初始幻灯片会淡出，只有当完成时才会出现新的幻灯片＆＃34; pop＆＃34;进入外表。相反，新幻灯片会在淡出开始的同时出现。

我要做的是让Cycle2执行默认的交叉渐变效果，并将sync选项设置为false。这是一个JSFiddle来演示。

您会注意到不需要在幻灯片中添加背景。

<强> 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>

注意：我在上面的HTML中将>编码为>，因为SO错误地将其视为结束标记。您可以在实际的HTML中使用>。（这里是SO question that addresses this specifically）。

jQuery cycle2 - 淡入/淡出内容重叠问题

4 个答案: