淡入淡出每个元素 - 一个接一个

Question

我想找到一种方法来加载一个JSON页面来显示我目前拥有的内容。但我试图逐个淡化每个元素？有没有人熟悉一种方法来做到这一点？

淡入每个元素有轻微的延迟？

这是我的代码的一个例子，我使用jQuery框架。

CODE：http://pastie.org/343896

Answer 1

那么，你可以设置你的淡入淡出功能来触发“下一个”。

$("div#foo").fadeIn("fast",function(){ 
     $("div#bar").fadeIn("fast", function(){ 
      // etc. 
     }); 
    }); 

但定时器可能是一个更好的系统，或者得到它们，把它们在阵列中，然后在它们之间具有延迟弹出它们关闭一次一个，衰落它们一次一个的功能时间。

Answer 2

退房jQuery的fadeIn()用的setTimeout（）（标准JS功能）。您可以结帐我在本网站上做过的一件http://www.realstorage.ca/。我基本上隐藏并显示它们，以便它可以循环。

Answer 3

我想你会需要的东西是这样的：

var elementArray = yourAjaxRequestReturningSomethingEdibleByJQuery(); 
fadeInNextElement(elementArray); 


function fadeInNextElement(elementArray) 
{ 
    if (elementArray.length > 0) 
    { 
     var element = elementArray.pop(); 
     $(element).fadeIn('normal', function() 
     { 
      fadeInNextElement(elementArray); 
     } 
    } 
} 

注意：我没有测试过，但即使不工作，你应该明白我的意思，轻松地解决它。

顺便说一下，我不同意使用计时器。有了定时器，没有任何事情可以保证元素会逐个淡入淡出，而且一个元素的淡入只会在前一个元素结束后才会开始。

理论上，它应该可以工作，但可能会出现某些情况，例如，由于某些原因您的“链”需要停止，或者衰落动画无法按时完成等。只需使用适当的链接即可。

Answer 4

比方说，你有跨度元素的数组：

$("span").each(function(index) { 
    $(this).delay(400*index).fadeIn(300); 
}); 

（快速注：我认为你需要的jQuery 1.4或更高版本使用.delay法）

这基本上是等待一个设定的时间量并淡入每个元素。这是有效的，因为您将时间乘以元素的索引。通过数组迭代时，延迟会是这个样子：

• 延迟400 * 0（无延迟，只是淡入，这是我们想要的效果的第一个元素）
• 延迟400 * 1
• 延迟400 * 2
• 延迟400 * 3

这使得一个很好的 “一前一后” 淡入效果。它也可以用于slideDown。希望这可以帮助！

Answer 5

这个怎么样？

jQuery.fn.fadeDelay = function() { 
delay = 0; 
return this.each(function() { 
    $(this).delay(delay).fadeIn(350); 
    delay += 50; 
}); 
};