jquery中的多个fadein动画

我希望淡入几个水平排列的盒子。 假设每个盒子属于fadeable类并且有id。 另外，我想从外面淡出盒子。例如：

 _ _ _ _ _ _ _ _ _ +_ _ _ _ _ _ _ _ +_ _ _ _ _ _ _ + + + _ _ _ _ _ _ + + + _ _ _ _ _ + + + + + _ _ _ _ + + 

等等。 使用jQuery解决这个问题的最佳方法是什么？

这是我现在（粗略地） – 给每个box div一个自动递增的元数据id boxid并执行以下操作：

 max = $(".fadeable:last").attr('boxid'); for(i=0;i<max;i++) { $("[boxid=" + i + "]").fadeIn('fast'); $("[boxid=" + (max-i) + "]").fadeIn('fast'); } 

有更好/更顺畅的方法吗？ （使用动画或排队？）另外，在CSS中安排元素的最佳方法是什么？

谢谢！

Answer 1

玩弄这个：

       Create Them Fade Them 
 
Answer 2
		      	
 好吧，看起来你的问题引发了很多研究！ 这就是我想出的。 我更多地使用了jQuery插件样式，因此有一些额外的代码，但它可以在整个项目中轻松重用。 此外，您可以将fadeIn设置为false ，它将以相同的模式淡出： 
         
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
10
 
   
 如果元素以display:none开头，或者它们需要fadeOut并以display:none结尾，则使用以下命令来启动插件： 
 // fadeIn: Assumes the div's start as display:none $("#items > div") .css({display: block, opacity: 0.0}) .fadeFromOutside(); // fadeOut: Will hide all divs at the end $("#items > div") .fadeFromOutside({ complete: function(){ $("#items > div").hide() } }); }); 


Answer 3
		      	
 $(".fadeable").each(function() { $(this).fadeIn('fast'); }); 


Answer 4
		      	
 根据您的原始代码，只需进行一些小调整： 
  max = $(".fadeable:last").attr('boxid'); for(i=0;i 

 这可能不是您需要的确切行为，但想法是链接衰落，以便下一个元素不会开始动画直到最后一个元素完成。 
 这是通过fadeIn函数中的回调参数实现的