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.

10 comentários em “JQuery: Carregando páginas animadas – load()

  • 20 de julho de 2011 em 13:45
    Permalink

    Olá… como faria para abrir qualquer uma das páginas de minha escolha automaticamente ao abrir a página… tipo como onload

    Resposta
    • 20 de julho de 2011 em 14:08
      Permalink

      Olá Bruno, é bem simples.

      $(document).ready(function(){
      $(“#principal”).load(“pagina.html”);
      });

      Resposta
  • 18 de novembro de 2011 em 16:37
    Permalink

    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?

    Resposta
    • 18 de novembro de 2011 em 19:15
      Permalink

      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.

      Resposta
  • 27 de março de 2012 em 12:18
    Permalink

    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 ..

    Resposta
  • 11 de março de 2013 em 15:02
    Permalink

    Olá o load() não funcionou no google Chrome, sabe o que deve ser feito para funcionar?

    Resposta
    • 12 de março de 2013 em 8:46
      Permalink

      Olá Eduardo,

      testei nos 3 principais navegadores e todos funcionaram perfeitamente.

      Resposta
  • 14 de março de 2013 em 13:16
    Permalink

    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!!!

    Resposta
    • 28 de março de 2013 em 9:01
      Permalink

      Olá Victor.

      Coloquei um link no post com um exemplo.

      Até mais.

      Resposta
  • 30 de maio de 2013 em 15:18
    Permalink

    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!

    Resposta

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *