JQuery: Carregando páginas animadas – load()
Vamos utilizar o método load() do JQuery para criar um efeito ao carregar uma página.
No código abaixo todas as páginas serão carregadas na div com id #pages.
código JQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#empresa").click(function(event){ event.preventDefault(); $("#pages").hide('slow').fadeIn('slow').load('empresa.php'); }); $("#fotos").click(function(event){ event.preventDefault(); $("#pages").slideUp('fast').load('fotos.php', function() { $(this).slideDown('slow'); }); }); $("#localizacao").click(function(event){ event.preventDefault(); $("#pages").slideUp('slow').load('localizacao.php', function() { $(this).fadeIn('slow'); }); }); $("#contato").click(function(event){ event.preventDefault(); $("#pages").slideUp('slow').load('contato.php', function() { $(this).slideDown('slow'); }); }); }); </script> |
index
<div id="topo"></div> <div id="menu"> <a href="#" id="empresa">Empresa</a> <a href="#" id="fotos">Fotos</a> <a href="#" id="localizacao">Localização</a> <a href="#" id="contato">Contato</a> </div> <div id="pages"></div> <div id="rodape">Rodape do site</div> |
empresa.php / fotos.php / localizacao.php / contatp.php
<p>teste</p> |
Veja o funcionamento, clicando aqui.
Olá… como faria para abrir qualquer uma das páginas de minha escolha automaticamente ao abrir a página… tipo como onload
Olá Bruno, é bem simples.
$(document).ready(function(){
$(“#principal”).load(“pagina.html”);
});
Mas se eu usar o código abaixo:
$(document).ready(function(){
$(“#principal”).load(“pagina.html”);
});
Como eu posso acrescentar um efeito fade, para que toda a vez que a página for carregada ela aparecer lentamente dentro da div?
Olá Dangelo,
uma maneira bem fácil de fazer isso é usando o código abaixo:
$(document).ready(function(){
$(“#principal”).hide(‘slow’).fadeIn(‘slow’).load(“pagina.html”);
});
Testa e depois comenta se deu certo.
Abraços.
var frag = document.createDocumentFragment(); como faço para atribuir o objeto a uma variavel no jquery. ?
ex: setor = document.getElementById(campoSetor).value;
fica assim : var nomeSetor = $(‘#nomeSetor’).val();
e no document.createDocumentFragment() ???? muito obrigado ..
Olá o load() não funcionou no google Chrome, sabe o que deve ser feito para funcionar?
Olá Eduardo,
testei nos 3 principais navegadores e todos funcionaram perfeitamente.
Olá pessoal, muito bom o exemplo, porém não consegui faze-lo funcionar será que vcs poderiam postar um exemplo pronto pra download, estou procurando isso à algum tempo porem não consigo.
Pergunta esse efeito funciona no Chrome???
se não, há algum outro método que funcione??
Grato!!!
Olá Victor.
Coloquei um link no post com um exemplo.
Até mais.
Fala galera, o código funcionou perfeitamente! Eu notei que nas perguntas acima, o nosso amigo não conseguiu rodar no Google Chrome…. Então, isso aconteceu comigo também, mas pelo o que eu analisei foi pelo fato de testar o arquivo localmente sem usar o virtual server…. Depois que eu joguei para o meu servidor virtual e para o meu servidor web, funcionou perfeitamente em todos os browsers!
Ok? Abraço a todos e valeu pela explicação!
Simples, limpa e funcional!