使用JQuery动态加载列表项

我想构建我的JQuery，一次淡出每个项目。 这是一个行为的例子 ，这是我到目前为止的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

这可能不是最好的解决方案，但它应该工作：

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