jQuery：FadeIn和FadeOut li并重新开始

我正在尝试获取一个列表淡入并按顺序淡出每个li，然后在显示最后一个li后重新开始。

 
One
 
Two
 
Three
  

这当然不起作用，它同时淡入淡出。

 $('.ul li').hide(); var i = 1; while(i < 4){ $('ul li:nth-child('+i+')').delay(1000).fadeIn(1000); $('ul li:nth-child('+i+')').fadeOut(100); i++; } 

Answer 1

你可以这样做：

 function showTheList() { var i = 1; function showOne() { if (i === 1) $('.ul li').hide(); $('ul li').eq(i-1).delay(1000).fadeIn(1000, function() { $('ul li').eq(i-1).fadeOut(100, function() { if (++i > 4) i = 1; showOne(); }); }); } showOne(); } 

该函数所做的是设置另一个函数来完成基于索引变量“i”显示一个

元素的工作。 当“i”为1时，它首先隐藏所有

元素。 然后它启动动画以淡入其中一个元素，然后将其淡出，最后在淡出完成后的回调中，它会增加“i”并再次启动。

这是一个jsfiddle。 请注意，我使用“.eq（）”而不是“nth-child”来减少混乱。 否则，这不会做任何非常奇怪的事情。

Answer 2

你正在描述幻灯片，所以让我们制作一个简单的幻灯片插件！

 $.fn.ezslide = function () { var $this = this, // cache this cur = 0, // current slide index // our fading function fadeIt = function( which ) { var li = $this.find('li'); // cache list items // reset index when reaching end of list items cur = which = (which >= li.length) ? 0 : which; li.fadeOut(100); li.eq( which ).delay(100).fadeIn(1000, function(){ // after fadeIn complete, call fadeIt again after a delay setTimeout(function() { cur++; fadeIt( cur ); }, 3000); }); }; // init fadeIt( cur ); }; $('ul').ezslide(); 

这是一个小提琴的例子。

---

现在让我们使用一些选项扩展这个简单的插件，以便我们可以轻松更改设置：

 $.fn.ezslide = function ( options ) { var defaults = { fadeIn : 1000, fadeOut : 100, delay : 3000 }, settings = $.extend( defaults, options ), $this = this, cur = 0, fadeIt = function( which ) { var li = $this.find('li'); cur = which = (which >= li.length) ? 0 : which; li.fadeOut( settings.fadeOut ); li.eq( which ) .delay( settings.fadeOut ) .fadeIn( settings.fadeIn, function(){ setTimeout(function() { cur++; fadeIt( cur ); }, settings.delay); }); }; fadeIt( cur ); }; $('ul').ezslide({ fadeIn : 600, fadeOut : 450, delay : 1500 }); 

这是我们新的小提琴示例。

Answer 3

CSS

 ul li { display: none; } 

HTML

 
 
One
 
Two
 
Three
  

JS

 var i = 0; function iteratelist() { var list = $('ul li'); list.eq(i).delay(1000).fadeIn(1000).fadeOut(100, function() { i++; if(i % list.length == 0) { i = 0; } iteratelist(); }); } iteratelist(); 

使用mod运算符，以便您可以轻松更改将来的项目数，而无需更新此JS函数。

这是一个很好的做法，从display：none开始，以避免在页面加载时显示一秒钟，特别是如果您要在文档内部调用此函数。