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') .delay(1000).fadeIn(800)

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') .delay(1000).fadeIn(800)

• javascript
• jquery

6 Answers 6

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

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

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

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

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

There is another way to fade in elements after each other:

$.fn.fadeInNext = function(delay) {
    return $(this).fadeIn(delay,function() {
        $(this).next().fadeInNext();
    });
};

$('li').hide().first().fadeInNext(1000);