Efeito ao clicar em botão para abrir outra página

Rapaz, creio que dê certo se você colocar uma div com posição absoluta e, ao clicar no botão, trazer ela para a posição (0,0) através de uma animação, como o animate() do jQuery.

E como faz isso? Tem algum exemplo?

Exemplo agora não, mas você pode pesquisar pela função animate da jQuery. A documentação oficial é bem completa e deve ajudar.
Aproveite e pesquise sobre position absolute do CSS.

Ok, vou fazer isso. Mas se tiver um tempo, teria como fazer um exemplo, estou me aventurando nisso ai.

Eu achei esse exemplo:

http://demos.jquerymobile.com/1.0a4.1/docs/pages/docs-transitions.html

http://imasters.com.br/artigo/19819/jquery/como-realizar-a-transicao-entre-paginas-utilizando-o-jquery-mobile/#comment-134533

Mas gostaria de usar o meu css, não estou conseguindo mudar. O exemplo do imaster é o mesmo da página oficial da jquerymobile, mas não estou conseguindo mudar o css para meu caso. Alguém pode me ajudar?


Tem esse outro aqui também: http://eufacoprogramas.com/utilizando-jquery-em-transicoes-de-paginas/#comment-1046

Alguem pra ajudar? Gostaria de fazer com uma barra de navegação. Ao clicar num item, abrir uma outra pagina usando jQuery

Alguem pra ajudar? Gostaria de fazer com uma barra de navegação. Ao clicar num item, abrir uma outra pagina usando jQuery

Primeiramente não recomendo o uso de jquery-mobile. Ele é um pouco "pesado" na hora de rodar na página. É questão de Kbytes, mas em comparação com outras bibliotecas mobile é consideravelmente maior. Outra coisa, não recomendo o uso da biblioteca apenas para uso de um efeito. Dá pra desenvolver algo na unha e também existem plugins que simulam esse efeito de flip horizontal.
Não sei se é o que procura, mas dá uma olhada nesse cara:
https://github.com/lepixel/flippy

Da pra fazer isso com link chamando outra página?

Se a requisição for por ajax, sim!
No caso do site que vc apontou o conteúdo já está renderizado na página antes do clique. Mas dá pra fazer chamando outro conteúdo pelo ajax, sim.

Raphael Neves, obrigado pela ajuda. Tem como você montar um exemplo simples chamando uma outra página usando esse exemplo com ajax? Poderia fazer esse favor?

Poderia fazer um exemplo simples com esse efeito utilizando ajax para chamar uma outra pagina por um botão ou link?

Alguém me ajuda a montar um index com um link chamando outra pagina com ajax utilizando o efeito do link postado?

A página a ser chamada é dinâmica? Qual linguagem está usando para desenvolver? Posso passar um exemplo de requisição ajax de uma aplicação minha que foi desenvolvida com cakephp pra você ter noção de como funciona.

Pode ser simples mesmo. É fácil de entender o que vc fez? Estou fazendo em php mesmo.

Consegue postar hoje aqui pra eu ver?

Estou no aguardo, ok?

Ainda no aguardo.

Ainda no aguardo.

Frederico, perdão. Tive problema com minha máquina e meus códigos estão no HD dela. Acredito que até quinta de manhã te mando.
Se vc tiver uma noção de MVC será fácil de entender sim.

Ok, fico no aguardo, tudo bem sem problemas.

Ainda no aguardo.

Vamos lá...ainda não arrumei a máquina, mas vou colocar um exemplo que uso no cake de forma resumida. Lembrando que essa metodologia é usada no CAKEPHP com MVC. Será preciso: duas páginas html (uma pra requisição e outra pra resposta), um método no controller e o layout "ajax" (que nada mais é um arquivo em branco que tem por objetivo não deixar que o layout default seja renderizado.

Vamos colocar como objetivo buscar um contato por ajax cujo ID seja 23.


Na view de requisição: aqui puxamos o id pelo método .val() do jquery e enviamos por meio do ajax ao nosso método pesquisa do controller contatos





pagina de retorno do ajax = "ret_ajax"




configuração do controller contatos



Fica mais ou menos assim. Só pra ter uma ideia mesmo. Fiz na correria aqui no meio de uma reunião e não deu pra revisar o código. Pode ser que tenha uma coisa ou outra fora do lugar ou faltando, mas a ideia é essa. Talvez não tenha ficado tão simples pq faz uso de conceito MVC e propriedades do framework. No entanto, a forma de requisição é a mesa para php puro tb. Se fizer no puro estude o método .serialize() do jquery e as funções php_decode e php_encode, caso seu retorno seja em json ou xml.

Abraço.

Vixe complicado, hein?

Não tanto. Coloquei a parte do Cake pra ter contexto, o que coloca como requisito ter uma noção de padrões de projeto.
Mas dá uma estudada na parte de $.ajax() da API do jquery. Trabalhar com AJAX sempre vai ser algo chato de se fazer, independente do contexto. Por isso que te falei que se for só pra reproduzir aquele efeito não vale a pena.
Ressalto que esse é um exemplo básico do uso de ajax. A API vai muito além disso.

Não teria nada pronto para rodar?

Cara, foge dessa ideia de copiar e colar script pronto. Melhor quebrar a cabeça um pouco e fazer algo que se adeque a sua realidade.
Ter algo pronto eu tenho, mas de acordo com minha realidade. Dê uma estudada nos pontos que te falei...ajax é é complicado, mas depois vira receita de bolo. Só que tem que praticar. Não sou adepto ao copiar e colar. O caminho das pedras é esse que te falei.

É que achei um pouco complicado. Tem como deixar mais fácil um poko pra entender. Você ta certo.