嘿,我不想在我的页面上做出很酷的效果,我在想,如何在加载时隐藏所有内容并逐个显示每个div？
如果这是一个坏主意,你能帮助我一个更好的主意吗？
如果这是一个坏主意,你能帮助我一个更好的主意吗？
EDIt：使用$(“div”).each()jQuery函数.
EDIT2：儿童的孩子.
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ão</h3>
<p>A Microdual tem a missão de desenvolver soluções tecnológicas inovadoras,que permitam satisfazer todas as necessidades dos clientes,parceiros e
empresas,através de produtos e serviços de elevada qualidade,que os tornam
mais eficientes. </p>
<h3>A Nossa Visão</h3>
<p>Acreditamos
que através da inovação tecnológica actual iremos encontrar as soluções
necessárias para enfrentar os desafios do futuro. Da tecnologia advém a
oportunidade para as empresas crescerem,para os cidadã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ões de ética;<br />A nossa comunicaçã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ç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á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>
谢谢大家
何塞莫雷拉
解决方法
你可以使用这样的东西：
$(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);
}
}
找到下一个隐藏的div并在每一秒都淡出它.只需使用CSS的display隐藏你想要显示的div：none;预先.
如果你出于某些奇怪的原因必须使用每个函数,这可能会有用..有点.
$(function() {
$('div:hidden').each(function(index) {
setTimeout(function(el) {
el.fadeIn();
},index * 1000,$(this));
});
});