jQuery:FadeIn和FadeOut li'；然后在最后一站重新开始

我试图得到一个列表，以淡入淡出每一个李分别顺序，然后重新开始，一旦最后一个李已显示

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

一个
两个
三

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

$('.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++;
 }

$（'.ul li'）.hide（）；
var i=1；
而（i<4）{
$（'ulli:nth child（'+i+'））.delay（1000）。fadeIn（1000）；
$（'ul li:n个孩子（'+i+'））。淡出（100）；
i++；
}

您可以这样做：

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（）”而不是“第n个孩子”来减少混乱。否则这不会做任何奇怪的事情。

CSS

ul li { display: none; }

HTML

使用mod操作符，以便将来可以轻松更改项目的数量，而不必关心更新此JS函数

---

从显示开始是一个很好的做法：在项目上没有显示，以避免在页面加载的瞬间显示，特别是当您要在document ready中调用此函数时。

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

$.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
});

---

这一款似乎效果最好。我在

fadeOut

前面添加了一个

.delay（2000）

，以使文本保持更长的时间。谢谢。非常感谢。我对这个脚本的唯一问题是，在加载脚本之前，列表会闪烁一秒钟。我忘了提到您需要在

上的

显示：无
中添加CSS样式。我使用了这个答案。当搜索类似的内容时，它会显示在顶部附近。评论只是说我发现使用
$（“ulli”）.css（“display”，“none”）更有用而不是纯CSS。这样，如果用户禁用了javascript，那么元素将正常堆叠。
$.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
});