Load List Items Dynamically With JQuery

I'd like to structure my JQuery to fade in each individual item at a time. Here's an example of the behavior, and here's the JQuery I have so far: $('li').css('display', 'none') .d

Solution 1:

This probably not the best solution but it should work:

$('li').each(function(i){
  var el = this;
  setTimeout(function(){
    $(el).fadeIn(800);
  },800*i)
});

Just for fun, a recursive version:

function animateLi(i){
  $('li').eq(i).fadeIn(800);
  if ($('li').eq(i+1).length>0)
  {
      setTimeout(function(){animateLi(i+1)},800);
  }
}
animateLi(0);

Solution 2:

Maybe something like this:

var delay = 500, t = 0;
$("li").css('display', 'none').each(function(){
  t += delay;
  var $li = $(this);
  setTimeout(function(){
    $li.fadeIn();
  },t);
});

Solution 3:

Loop through the li, and use setTimeout to queue the animation for that li.

$('li').each(function () {
    var li = this;
    animateLi = function () {
        li.fadeIn(800);
    }
    setTimeout(animateLi, timeout);
    timeout += 100;
});

Solution 4:

A slight variation on Ivans method

$(function() {
    $('ul li:hidden').each(function(idx) {
        setTimeout(function(el) {
            el.fadeIn();
        }, idx* 1000, $(this));
    });
});

And a recursive function using fadeIn callback function instead of setTimeout

function DisplayOneByOne(){
    $('ul li:hidden:first').fadeIn('2000',  DisplayOneByOne);
}

Solution 5:

Here is how you do it:

var delay = 200, t = 0;
$("li").css('display', 'none').each(function(){
    t += delay;
    var $li = $(this);
    setTimeout(function(){
        $li.fadeIn(1900);
    },t);
});