Question

我正在尝试获取一个列表淡入并按顺序淡出每个li，然后在显示最后一个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++;
 }

Answer 1

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

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

Here's a fiddle example.

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

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

Here's our new fiddle example.

Answer 2

你可以这样做：

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”执行仅显示<li>个元素之一的工作。当“i”为1时，它首先隐藏所有<li>元素。然后它启动动画以淡入其中一个元素，然后将其淡出，最后在淡出完成后的回调中，它会增加“i”并再次启动。

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

Answer 3

CSS

ul li { display: none; }

HTML

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

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，以避免在页面加载时显示一秒钟，特别是如果您要在文档准备好的内部调用此函数。

jQuery：FadeIn和FadeOut li并重新开始

3 个答案: