¿Cómo mostrar cada div, uno por uno en jquery?

Question

Hola, quiero hacer un efecto genial en mi página, y estoy pensando, ¿qué tal ocultar todo mientras cargaba y mostrar cada div con efecto uno por uno? si es una mala idea, ¿me pueden ayudar con una idea mejor?

EDIt: Utilizando la función $ ("div"). Each() jQuery. EDIT2: niños por niños.

Edit3:

<div id="loader"><table cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td><img src='/assets/images/ajax-loader.gif' border=0 alt=""><br><br>A carregar, aguarde...</td></tr></table></div> 

    <!-- start #menu --> 
    <div class="wrapper" id="menu"> 
     <div class="center_div"> 
      <h1 class="logo"><a href="/pagprincipal" title="Microdual">Microdual</a></h1> 
      <ul class="sf-menu"><li class="active"><a href="empresa/perfil" title="Empresa" ><span class="menuicon" id="empresa"></span>Empresa</a><ul><li class="active"><a href="/empresa/perfil" title="Perfil" >Perfil</a></li> 
<li><a href="/empresa/politica-qualidade" title="Política de Qualidade" >Política de Qualidade</a></li> 
<li><a href="/empresa/novidades" title="Novidades" >Novidades</a></li> 

<li><a href="/empresa/portfolio" title="Portfólio" >Portfólio</a></li> 
<li class="last"><a href="/empresa/contactos" title="Contactos" >Contactos</a></li> 
</ul></li> 
<li><a href="/produtos" title="Produtos" ><span class="menuicon" id="produtos"></span>Produtos</a><ul><li><a href="/produtos/alojamento-web" title="Alojamento Web" >Alojamento Web</a></li> 
</ul></li> 
<li><a href="/servicos" title="Serviços" ><span class="menuicon" id="servicos"></span>Serviços</a><ul><li><a href="/servicos/assistencia-tecnica" title="Assistência Técnica" >Assistência Técnica</a></li> 
</ul></li> 
<li class="last"><a href="/suporte" title="Suporte" ><span class="menuicon" id="suporte"></span>Suporte</a><ul><li><a href="/suporte/suporte-empresas" title="Suporte Técnico Empresas" >Suporte Empresas</a></li> 
<li><a href="/suporte/suporte-home" title="Suporte Técnico Home" >Suporte Home</a></li> 

<li><a href="/suporte/suporte-tecnico-web" title="Suporte Técnico Web" >Suporte Web</a></li> 
<li class="last"><a href="/suporte/area-de-downloads" title="Área de Downloads" >Área de Downloads</a></li> 
</ul></li> 
</ul> 
     </div> 
    </div> 
    <!-- end #menu --> 

<!-- start #main --> 
    <div class="wrapper" id="header_page"> 
     <div class="center_div"> 

      <div id="right"> 
<p style="text-align: center;"><img src="assets/images/perfil-top.jpg" alt="" width="590" height="200" /></p> 
<h3>A Nossa Miss&atilde;o</h3> 
<p>A Microdual tem a miss&atilde;o de desenvolver solu&ccedil;&otilde;es tecnol&oacute;gicas inovadoras, 
que permitam satisfazer todas as necessidades dos clientes, parceiros e 
empresas, atrav&eacute;s de produtos e servi&ccedil;os de elevada qualidade, que os tornam 
mais eficientes. </p> 
<h3>A Nossa Vis&atilde;o</h3> 
<p>Acreditamos 
que atrav&eacute;s da inova&ccedil;&atilde;o tecnol&oacute;gica actual iremos encontrar as solu&ccedil;&otilde;es 
necess&aacute;rias para enfrentar os desafios do futuro. Da tecnologia adv&eacute;m a 
oportunidade para as empresas crescerem, para os cidad&atilde;os em mercados 
emergentes prosperarem entrando na Economia digital, e para as pessoas adaptarem 
novas possibilidades.</p> 

<h3>Os Nossos Valores</h3> 
<p>A nossa conduta deve refletir os mais altos padr&otilde;es de &eacute;tica;<br />A nossa comunica&ccedil;&atilde;o deve ser clara e precisa;<br />O nosso gerenciamento deve ser em equipa, consistente e focado;<br />O nosso relacionamento com clientes e colaboradores deve ser transparente e baseado na responsabilidade e confian&ccedil;a entre as partes.</p> 
<ul class="post_list"> 
</ul> 
<h3>O Nossos Objetivo</h3> 
<p>Melhorar continuamente o que fazemos, para assim contribuir 
para o desenvolvimento sustent&aacute;vel, acrescentando vantagem competitiva.</p> 

      </div> 
      <div id="left"> 
<ul class="sf-submenu"><li class="active"><a href="/empresa/perfil" title="Perfil" >Perfil</a></li> 
<li><a href="/empresa/politica-qualidade" title="Política de Qualidade" >Política de Qualidade</a></li> 
<li><a href="/empresa/novidades" title="Novidades" >Novidades</a></li> 
<li><a href="/empresa/portfolio" title="Portfólio" >Portfólio</a></li> 
<li class="last"><a href="/empresa/contactos" title="Contactos" >Contactos</a></li> 
</ul> 
      </div> 

     </div> 
    </div> 
    <!-- end #main --> 



    <!-- start #footer --> 
    <div class="wrapper" id="footer"> 
      <div id="footer_contents"> 
       <p>©Microdual 2010 - <a href="empresa/termos-e-condicoes-utilizacao" title="">Termos de Utilização</a> - <a href="empresa/politica-privacidade" title="">Privacidade</a> - <a href="empresa/compatibilidade-do-website" title="">Compatibilidade</a> - <a href="mapasite" title="">Mapa do Site</a> - <a href="empresa/contactos" title="">Contactos</a> |</p> 

       <ul> 
        <li><a href="#" title=""><img src="/assets/templates/default/img/network_icons/feed.gif" alt="Feed" /></a></li> 
        <li><a href="#" title=""><img src="/assets/templates/default/img/network_icons/twitter.gif" alt="Twitter" /></a></li> 
        <li><a href="#" title=""><img src="/assets/templates/default/img/network_icons/facebook.gif" alt="Facebook" /></a></li> 
       </ul> 
       <form action="" method="get"> 
        <div> 
         <input class="input_search" name="search_field" type="text"> 
         <input value="Procurar" class="button_search" type="submit"> 

        </div> 
       </form> 
      </div> 
    </div> 

gracias a todos José Moreira

Answer 1

Usted podría utilizar algo como esto:

$(function() { 
    // Start showing the divs 
    showDiv(); 
}); 

function showDiv() { 
    // If there are hidden divs left 
    if($('div:hidden').length) { 
     // Fade the first of them in 
     $('div:hidden:first').fadeIn(); 
     // And wait one second before fading in the next one 
     setTimeout(showDiv, 1000); 
    } 
} 

que buscar la siguiente div ocultos y se desvanecen en cada segundo. Simplemente oculte los divs que desea mostrar usando el display: none; de CSS de antemano.

---

Si por alguna extraña razón tiene que utilizar la función each, esto podría funcionar .. un poco.

$(function() { 
    $('div:hidden').each(function(index) { 
     setTimeout(function(el) { 
      el.fadeIn(); 
     }, index * 1000, $(this)); 
    }); 
}); 

Answer 2

pruebe el siguiente código:

$('div').hide().each(function(index, domElement) { 
     $(this).slideDown("slow"); 
     // Wait for the end of the animation somehow... 
    }) 

Answer 3

o puede utilizar este plugin: https://github.com/Devlart/Jquery-AnimateOnebyOne