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


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

<strong>Here's a fiddle example.</strong>


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

<strong>Here's our new fiddle example.</strong>



ul li { display: none; }


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


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.


  • JScrollPane problem
  • Good pattern for hiding ion-nav-bar on login and not having a back button just after login?
  • Aggregating By Date in Mongodb
  • Advantage of 'one dimensional' hash over array in Perl
  • Reinitialise existing jQuery flexslider with new options
  • C++ development on linux Code::Blocks, EMACS or GVIM [closed]
  • I have a modal that opens a second modal and cannot close the first modal if open then close the sec
  • Where to put clearQueue in jQuery code
  • What does a hyphen at end of a term mean
  • smarty nested if condition is not working properly?
  • How does ActiveSupport do month sums?
  • div fade-in when window is scrolled a certain distance from the top
  • why xml file does not aligned properly after append the string in beginning and end of the file usin
  • Use of this Javascript
  • C++ Partial template specialization - design simplification
  • Python CGI os.system causing malformed header
  • PHPUnit_Framework_TestCase class is not available. Fix… - Makegood , Eclipse
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • When should I choose bucket sort over other sorting algorithms?
  • Weird JavaScript statement, what does it mean?
  • How do you troubleshoot character encoding problems?
  • Jquery - Jquery Wysiwyg return html as a string
  • How to get next/previous record number?
  • Rearranging Cells in UITableView Bug & Saving Changes
  • R: gsub and capture
  • Confusion with PayPal's monthly billing cycle
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • Unanticipated behavior
  • How to format a variable of double type
  • Comma separated Values
  • Python: how to group similar lists together in a list of lists?
  • Proper way to use connect-multiparty with express.js?
  • How to set the response of a form post action to a iframe source?
  • Change div Background jquery
  • Qt: Run a script BEFORE make
  • reshape alternating columns in less time and using less memory
  • How to Embed XSL into XML
  • Conditional In-Line CSS for IE and Others?
  • How to load view controller without button in storyboard?