在同一个地方淡入/淡出元素

我有一个无序列表，设置为全屏，每个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>

注：我想远离使用重插件远特别是当大多数人并不满足背景重复行为。

来源

2013-02-25 egr103

为什么你无法使用'$（ '选择'）淡入（函数（）{$（本）.fadeOut（）;}）;'方法??使用javascript在一段时间内调用它。 – shashwat 2013-02-25 15:46:49

@ShashwatTripathi我是一个新手，当谈到JS，所以我不知道如何去做这个... – egr103 2013-02-25 15:48:46

我不明白你想达到什么样的效果..'：/ ' 你希望所有的锂都能每20秒立即滑出一次？ – Stphane 2013-02-25 15:50:42

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; left:0; top:0;到LIS并添加了类与背景为每个L1。

您需要更改的唯一的事情就是每个L1需要其类的背景，而不是使用第n个孩子，因为这段代码现在与李的组织搞乱，通过获取刚刚褪去之一，并在最后追加再次（因此可见的将永远是nth-child(0)）。

这是Jonathan Snook的Simplest jQuery Slideshow的微小修改版本。

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

来源

2013-02-25 16:25:27 RaphaelDDL

这看起来很好，谢谢，虽然它不会重复，当它得到到最后？它重复第一个里，但然后淡出到白色背景，并停止？如何解决这个问题，使其不断循环？ – egr103 2013-02-26 10:24:34

没问题，选择器是错的。感谢您的代码！在这里看到正确的选择器：http://jsfiddle.net/jRDkm/5/ – egr103 2013-02-27 13:40:40

我会创建一个函数来做到这一点，并使用setInterval调用它。

然后，当您加载所有页面时，调用clearInterval函数停止闪烁。

http://jsfiddle.net/uWwfv/4/

function fadeBlinking() { 
    $('li').fadeOut(500, function() { 
     $(this).fadeIn(500); 
    }); 
} 

var intervalHandle = setInterval(function() { 
    fadeBlinking(); 
}, 20000); 

fadeBlinking(); 

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

    //Stop blinking when your condition is met 
    clearInterval(intervalHandle) 
});

来源

2013-02-25 15:52:05 sdespont

感谢这一点，虽然jsFiddle不适合我？ – egr103 2013-02-25 15:55:44

这不是一个“即插即用”的代码片段，但试试这一个：http://jsfiddle.net/uWwfv/4/ – sdespont 2013-02-25 15:57:01

在同一个地方淡入/淡出元素

回答

相关问题