jQuery: FadeIn and FadeOut li's and start over at the last li

I'm trying to get a list to fade in and fade out each li individually in order, and then start over once the last li has been shown.

<ul>
    <li>One</li>
    <开发者_开发百科;li>Two</li>
    <li>Three</li>
</ul>

This of course is not working, it fades them all in and out at the same time.

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

You're describing a slideshow, so let's make a simple slideshow plugin!

$.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.

Now let's extend this simple plugin with some options so we can easily change settings:

$.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.

You could do it like this:

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();
 }

What that function does is set up another function to do the work of showing just one of the <li> elements, based on the index variable "i". When "i" is 1, then it first hides all the <li> elements. It then starts up the animation to fade in one of the elements and then fade it out, and finally in the callback from when the fade-out is done it increments "i" and starts itself again.

Here is a jsfiddle. Note that I used ".eq()" instead of the "nth-child" thing to cut down on clutter. Otherwise this doesn't do anything that's really weird.

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

Use the mod operator so you can easily change the number of items in the future and not care for updating this JS function.

It's a good practice to start with display:none on the items to avoid showing the for a split second on page load especially if you're going to call this function inside of document ready.