jquery - 在同一位置淡入/淡出元素

Question

我有一个设置为全屏的无序列表，每个 li 都有一个重复的背景图案。我希望每 li 在页面加载后每 20 秒淡入/淡出。我的 jsfiddle:http://jsfiddle.net/uWwfv/1/

我已经尝试过 css 方式(我的 li 元素的绝对定位)，但它不适用于我的全屏脚本，因此需要纯 jQuery 来淡入/淡出每个 li。我该怎么做？

全屏代码为:

function fitElements() {

var height = $(window).height();

var width = $(window).width();

$('ul#fullscreen-slider li').css('height', height);

$('ul#fullscreen-slider li').css('width', width);

};


$(document).ready(function() {
fitElements();
});

HTML:

<section id="home">
    <ul id="fullscreen-slider">
        <li><h1 class="cherry-red"><span>Slide 1</span></h1></li>
        <li><h1 class="cherry-red"><span>slide 2</span></h1></li>
        <li><h1 class="cherry-red"><span>slide 3</span></h1></li>
        <li><h1 class="cherry-red"><span>slide 4</span></h1></li>
        <li><h1 class="cherry-red"><span>slide 5 - when complete fade to slide 1</span></h1></li>
    </ul>
</section>

注意:我想避免使用繁重的插件，尤其是当大多数插件不适合背景重复行为时。

Answer 1

JS函数

function slideshow() {
    $('#fullscreen-slider li:gt(0)').hide();
    setInterval(function(){$('#fullscreen-slider :first-child').fadeOut().next('li').fadeIn().end().appendTo('#fullscreen-slider');}, 3000);
}

对于 CSS，添加 position:relative; 到 UL，position:absolute;左:0； top:0; 到 LI，并为每个 LI 添加一个具有背景的类。

你唯一需要改变的是每个 li 需要它的类作为它的背景，而不是使用第 nth-child，因为这段代码现在通过获取刚刚褪色的那个并再次追加到末尾来扰乱 li 的组织(因此可见的总是 nth-child(0))。

这是 Simplest jQuery Slideshow 的轻微修改版本乔纳森·斯努克 (Jonathan Snook) 着。

这是我的 jsFiddle http://jsfiddle.net/jRDkm/1/