Olá, Galera
Estive um tempo afastado do Blog, mais foi por motivos de tempo mesmo… estava com alguns projetos pendentes e em paralelo também reformulando a versão HTML do nosso site conforme vocês podem conferir no post abaixo.
Bem, hoje trago uma dica muito legal chamada Jump Animação, são aquelas Box de textos que surgem quando você clica em um determinado link.
Aqui tem um exemplo do que estou falando.
Bem para desenvolve-lo vamos precisar do seguinte plugin:
jquery.min.js
No código HTML de sua página insira o plugin e a seguinte função javascript dentro da tag <head>:
<script src=”jquery.min.js”></script>
<script type=”text/javascript” charset=”utf-8″>
$(document).ready(function () {
var $div = $(‘#test’);
var height = $div.height();
$div.hide().css({ height : 0 });
$(‘a’).click(function () {
if ($div.is(‘:visible’)) {
$div.animate({ height: 0 }, { duration: 2500, complete: function () {
$div.hide();
} });
} else {
$div.show().animate({ height : height }, { duration: 2500 });
}
return false;
});
});
</script>
Ainda no HTML agora dentro da tag <body> insira um link:
<div><a href=”#test”>Revelar</a></div>
Abaixo a divo onde vai contar a Box:
<div id=”container”>
<div id=”test”>
<p>Olá, </p>
<p id=”hello”>Este conteúdo esta bloqueado até o momento de ser revelado ao clicar em “Revelar” 
</p>
<p>Aqui você entra com o conteúdo que você quiser, não hamisterio para fazer isso, script muito fácil de ser executado, mais um tutorial da <strong>Agência de Web</strong> Arara Azul Websites, a sua agência de <a title=”Criação de sites” href=”http://www.araraazulwebsites.com.br”>Criação de sites</a>.</p>
<p>Tudo o que esta nesta DIV vai ficar dentro da box escondida. Espero que tenham gostado, comentem lá no blogo suas dúvidas, críticas ou elogios.</p>
<p>Vlw, fui. Só clicar em REVELAR novamente q isso tudo aqui some… XD</p>
</div>
</div>
Obs.:
O id que esta definido na div “<div id=”test”>” é o mesmo que foi definido na função, por tanto se você mudar esse (Aconselho não mudar) você vai ter q mudar na função também.
CSS:
Vamos adicionar agora o CSS, dentro da tag <head> pode ser acima da função, adicione o seguinte código CSS:
<style type=”text/css” media=”screen”>
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; font-size: 16px; line-height: 20px; padding: 20px; }
a { line-height: 40px; }
#container { width: 300px; }
#test { background: #395aff; color: #fff; }
#test p { margin: 0; margin-bottom: 16px; }
</style>
Pronto, é só isso…
Clique aqui para ver um exemplo funcionando.
Qualquer dúvida só postar aqui que estarei respondendo.
Um abraço e até a próxima.
Leonardo Cardoso
Criação de sites
Gostou? Então compartilhe!
