淡出幻灯片Jquery问题

Question

我创建了一个幻灯片，使用具有淡入淡出效果的jquery，幻灯片显示的问题是如果我添加图像，它显示正确，但如果我添加文本而不是图像，文本反弹从下到上，我想要它固定在顶部。实际上问题可能是因为，我正在做的是，我有六个li我正在启用li并禁用休息，现在我将fadeout效果给予第一个li和fadein效果到下一个li，现在当第一个li淡出而下一个li淡出时，那时文本会反弹，但我不明白为什么这不会发生图片，这是我的完整代码。

您可以download full project查看

目前div包含图像，如果用h1元素替换它，则可以看到错误的输出

Answer 1

因此，使用jquery.cycle，设置淡入淡出效果就像下面一样简单。您的HTML应该类似于：

<div id="slideshow">
    <div class="slide">
        <p>Some text</p>
        <img ... />
    </div>
    <div class="slide">
        <p>Some text</p>
        <img ... />
    </div>
    <!-- more slides ... -->
</div>

然后你的javascript是：

$('#slideshow').cycle({
    fx:'fade',
    slideExpr: '.slide'
});

淡入淡出效果（fx）是循环插件中的标准效果。 slideExpr定义了一个jquery选择器，用于为幻灯片选择主要（在本例中为#slideshow）包装器中的幻灯片元素。