逐渐淡化每一个元素

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

每个元素都淡入淡出？

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

代码： http : //pastie.org/343896

Answer 1

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

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

但是一个计时器可能是一个更好的系统，或者是一个可以把它们全部放到一个数组中的函数，然后把它们放在一个数组中，然后在两者之间进行延迟，然后一次一个地将它们放入一个数组中。

Answer 2

假设您有一个span元素的数组：

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

（快速提示：我认为你需要使用jQuery 1.4或更高版本来使用.delay方法）

这将基本上等待一段时间，并淡入每个元素。这是因为你乘以时间等待的元素的指数。 遍历数组时，延迟看起来像这样：

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

这使得一个不错的“一个接一个”淡入淡出效果。 它也可以用于slideDown。 希望这可以帮助！

Answer 3

这个怎么样？

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

Answer 4

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

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

警告：我没有testing过，但是即使不起作用，您也应该明白并修正它。

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

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

Answer 5

用setTimeout（）（标准JS函数）检查jQuery fadeIn（ ）。 你可以结帐我在这个网站http://www.realstorage.ca/上做的事情。; 我基本上隐藏并显示它们，所以它可以循环。