Load list items dynamically using jQuery

Question

I would like to structure my jQuery to fade into each individual element at a time. Here's an example of behavior , but I still have jQuery:

$('li').css('display', 'none') .delay(1000).fadeIn(800)

Answer 1

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

Answer 2

This is 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, the 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);

Answer 3

li setTimeout li.

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

Answer 4

Ivans

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

, fadeIn setTimeout

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

Answer 5

:

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

Answer 6

:

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

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