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

【问题标题】：jQuery cycle2 - fade/fadout content overlap issuejQuery cycle2 - 淡出/淡出内容重叠问题
【发布时间】：2017-05-19 08:11:18
【问题描述】：

请查看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"
        >

如何避免滑块淡入/淡出时的内容重叠问题

【问题讨论】：

标签： jquery html css slider fade

【解决方案1】：

可以试试这个..Working Fiddle

对 html 进行了一些更新。

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

看看这个：http://jsfiddle.net/Mbs46/

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

【讨论】：

【解决方案4】：

您的问题是由默认值为true 的sync 选项以及您将fx 选项设置为fadeout 引起的。

来自 jQuery Cycle2 API 文档：

sync: 如果true 则传入和传出幻灯片的动画将是同步。如果false 则传入幻灯片的动画将直到传出幻灯片的动画完成后才开始。

没有为fadeout 转换提供描述，但观察表明它就是这样做的：淡出。这与将初始滑出和新滑入淡出的默认交叉淡入淡出行为形成对比。我原以为使用fadeout 会很好：预期行为（sync 设置为false）将是初始幻灯片会淡出，只有在完成后，新幻灯片才会“弹出”出现。相反，新幻灯片会在淡出开始的同时出现。

我要做的是让 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 中将 &gt; 编码为 &gt;，因为 SO 错误地将其视为结束标记。您可以在实际 HTML 中使用 &gt;。（这里是SO question that addresses this specifically）。

【讨论】：