Wie zeigt man jedes div, eins nach dem anderen auf jquery?

Question

Hey, ich möchte einen coolen Effekt auf meiner Seite machen, und ich denke, wie wäre es, alles während des Ladens zu verstecken und jedes Div einzeln nacheinander zu zeigen? Wenn es eine schlechte Idee ist, können Sie mir mit einer besseren Idee helfen?

EDIt: Verwenden der $ ("div"). Jede() jQuery-Funktion. EDIT2: Kinder von Kindern.

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> 

Dank an alle José Moreira

Answer 1

Sie so etwas wie dies nutzen könnten:

$(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); 
    } 
} 

, dass die nächste versteckte div finden und verblassen sie in jeder Sekunde. Verstecke einfach die DIVs, die du anzeigen willst, indem du zuvor display: none; von CSS verwendest.

---

Wenn Sie aus irgendeinem seltsamen Grund, die each Funktion verwenden, könnte dies .. irgendwie funktionieren.

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

Answer 2

den nächsten Code Versuchen:

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

Answer 3

Oder Sie dieses Plugin verwenden: https://github.com/Devlart/Jquery-AnimateOnebyOne