Làm thế nào để hiển thị từng div, từng cái một trên jquery?

Question

Xin chào, tôi không thể tạo hiệu ứng mát mẻ trên trang của mình và tôi đang nghĩ, làm thế nào để ẩn mọi thứ trong khi tải và hiển thị từng div với hiệu ứng từng cái một? nếu đó là ý tưởng tồi, bạn có thể giúp tôi với ý tưởng tốt hơn không?

EDIt: Sử dụng hàm $ ("div"). Each() Hàm jQuery. EDIT2: Trẻ em của trẻ em.

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> 

nhờ vào tất cả José Moreira

Answer 1

Bạn có thể sử dụng một cái gì đó như thế này:

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

Đó tìm div ẩn tiếp theo và mờ dần nó trong mỗi giây. Chỉ cần ẩn các div bạn muốn hiển thị bằng cách sử dụng trước đây của CSS display: none;.

---

Nếu bạn vì lý do gì đó lạ phải sử dụng chức năng each, điều này có thể hoạt động .. kinda.

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

Answer 2

Hãy thử các mã tiếp theo:

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

Answer 3

Hoặc bạn có thể sử dụng plugin này: https://github.com/Devlart/Jquery-AnimateOnebyOne