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

Question

我正在尝试找到一种方法来加载JSON页面来显示我目前拥有的内容.但我试图逐个淡出每个元素？是否有人熟悉这种方法？

稍微延迟淡入每个元素？

这是我的代码示例,我使用的是jquery框架.

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

Answer 1

假设你有一个span元素数组:

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

(快速说明:我认为你需要jQuery 1.4或更高版本才能使用.delay方法)

这基本上会等待一段时间并淡化每个元素.这是有效的,因为你将等待时间乘以元素的索引.在迭代数组时,延迟看起来像这样:

• 延迟400*0(没有延迟,只有fadeIn,这是我们想要的第一个元素)
• 延迟400*1
• 延迟400*2
• 延迟400*3

这使得"一个接一个"很好的淡入淡出效果.它也可以与slideDown一起使用.希望这可以帮助!

Answer 2

好吧,你可以设置你的淡入淡出功能来触发"下一个".

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

但是计时器可能是一个更好的系统,或者是一个能够全部获取它们的函数,将它们放入一个数组中,然后一次一个地将它们弹出一个延迟,一次一个地将它们淡化.

Answer 3

这个怎么样？

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