リスト項目をJQueryで動的にロードする

Question

私は一度に各項目をフェードインするためにJQueryを構造化したいと思います。ここでan example of the behaviorをだし、ここで私がこれまで持っているjQueryの：リチウムを通じて

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

Answer 1

このような

多分何か：

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

Answer 2

ループを、そのリチウムのアニメーションをキューにはsetTimeoutを使用しています。

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

Answer 3

これはおそらくない最良の解決策が、それは動作するはずです：

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

楽しみのためだけに、再帰バージョン：

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

Answer 4

イヴァンスのメト代わりに、ここでのsetTimeout

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

Answer 5

のDフェードインコールバック関数を使用して

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

そして、再帰関数は、あなたがそれを行う方法です。

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