HTML

Em 19/11/2014 às 10:11h por Leonardo

Efeitos de animação em JQuery

Aprenderemos nesse artigo uma utilização básica com efeitos de animação em JQuery. Entenderemos como funciona a leitura da página, seletores e a manipulação de dados em JavaScript. A JQuery é a maneira mais simples e comum hoje em dia de deixar seu website mais dinâmico e bonito.

Primeiramente, o que é JQuery?

JQuery é uma biblioteca javascript, e é utilizada do lado cliente em uma aplicação web, ou seja, o dispositivo que executa seus comandos não é o servidor e sim o navegador em si em tempo real.

O código é aberto e você pode baixa-lo no site //jquery.com/download/. No exemplo abaixo utilizo a versão 2.x, para baixar essa versão clique no link Download the uncompressed, development jQuery 2.1.1 na página do site indicado acima.

A JQuery facilita muito a vida do programador, ela simplifica todo o uso de javascript. Você pode criar aplicações com requisições Ajax (mais no tutorial usando Ajax com Jquery), e deixa seu site mais bonito, leve e dinâmico.

Agora chega de lengalenga e vamos ao uso:

Após ter baixado a biblioteca no link acima, coloque ela dentro de uma pasta, eu por costume, organizo sempre colocando os códigos em javascript extensão (.js) em uma pasta nomeada js, e coloco essa pasta onde fica o arquivo index do site e ou aplicação, ou melhor dizendo, na pasta raiz do site, enfim isso é mais um gosto pessoal de organização.

Agora vamos criar um arquivo HTML. Abra o notepad++, ou o aplicativo que você costuma usar para desenvolver, escreva um código html simples, e coloque duas divs nele, uma com a id=click e outra com id=show. Salve com o nome que você deseja e com a extensão .html, eu usarei o nome index.html.

 <html> <head> <meta charset=”utf-8”/> <title>JQUERY BÁSICO</title> </head> <body> <h1> APRENDENDO JQUERY BASICO </h1> <div id=”click”></div> <div id="show"> <p>//Aqui inicio do código Jquery</p> </div> </body> </html>

O próximo passo é fazer um arquivo CSS (Cascading Style Sheets), ele formatará nossa página html, outra vez por questões de padrão de organização eu guardo este arquivo em uma pasta chamada css, e coloco na pasta do site, a mesma onde colocamos a pasta js. Abra uma nova aba no notepad++ comece a escrever o arquivo.

O arquivo css ficará assim, lembrando que depende muito do seu gosto para formatação:

 /*formata todo o site, o corpo do site*/ body{ background-color: #FFF; /*cor de fundo, neste caso branco*/ } /*formata o titulo da pagina*/ h1{ position: relative; /*indica que o título será relativo a div absoluta acima, neste caso ao body */ font-size: 30px; /*tamanho da fonte*/ font-family: Helvetica, Arial; /*tipo da fonte*/ padding: 20px; /*espaçamento de linha */ text-align: center; /*alinhamento do texto*/ color: #6096B8; /*cor da fonte*/ } /*formata o paragrafo de dentro da div que será exibida*/ p{ position: relative; /*indica que o título será relativo a div absoluta acima, neste caso ao body */ font-size: 12px; /*tamanho da fonte*/ font-family: Helvetica, Arial; /*tipo da fonte*/ margin: 4px; /*espaçamento de linha */ text-align: justify; /*alinhamento do texto*/ color: #FFF; /*cor da fonte*/ } /*Aqui formatamos a div que funcionara como um botão*/ div#click{ position: relative; /*Diz que a div tem uma posição relativa a ao corpo do site*/ width:100px; /*largura da div*/ height: 65px; /*altura da div*/ background-color: #BCE851; /*cor de fundo da div*/ margin: 30px auto; /*esta propriedade diz que qualquer outro item deve ficar a 30px de distancia e a palavra auto faz que esta div fique exatamente no meio da tela*/ cursor: pointer; /*o cursor do mouse sera uma mãozinha*/ border-radius: 6px; /*arredondar a borda da div*/ background-image: url('../logoClickAqui.png'); /*Inserindo uma imagem na div*/ background-position: center center; /*posição da imagem*/ background-size: cover; /*Tamanho da imagem, no tamanho da div*/ background-repeat: no-repeat; /*propriedade para nao repetir imagem na div*/ } /*Aqui um efeito, quando o mouse estiver em cima da div, evento hover, ele mudara a cor de fundo*/ div#click:hover{ background-color: #FFC967; /*cor de de fundo da div*/ transition: .4s; /*tempo para acontecer o evento hover*/ } /*Esta div será mostrada após clicada na div click isso com efeito Jquery*/ div#show{ position: relative; /*Diz que a div tem uma posição relativa a ao corpo do site*/ width:500px; /*largura da div*/ height: 325px; /*altura da div*/ background-color: #000; /*cor de fundo da div*/ margin: 30px auto; /*esta propriedade diz que qualquer outro item deve ficar a 30px de distancia e a palavra auto faz que esta div fique exatamente no meio da tela*/ display: none; /*como queremos que ela apareça apenas após clicarmos, essa propriedade faz com que a pagina inicie sem mostrar esta div*/ border-radius: 10px; /*arredondar bordas da div*/ box-shadow: 0px 0px 13px 2px; /*sombras na div*/ padding: 20px; /*margem interna*/ }

Agora você deve salvar este arquivo, eu coloquei como nome style.css, salve dentro da pasta css criada.

Pronto agora já temos os arquivos css pronto e à biblioteca Jquery já baixada. Mas para que o arquivo index.html os reconheça precisamos colocar um link na pagina index.html, entre as tags <head> e </head>

Então abra o arquivo html e entre as tags <head> e </head> faço o seguinte, lembrando que as tag , são comentários.

 <!-- inicio da tag head, já escrita anteriormente --> <head> <!-- tag meta, já escrita anteriormente --> <meta charset=”utf-8” /> <!-- Link para o arquivo css , no href você terá o caminho para o arquivo css onde fizemos os estilo da pagina, temos que colocar o caminho / nome do arquivo.extensão--> <link rel="stylesheet" type="text/css" href="css/style.css" /> <!-- Agora precisamos colocar o link da biblioteca jquery --> <script language="JavaScript" src="js/jquery-2.1.1.js"></script> </head>

Pronto, feito isso salve o arquivo. Agora já está tudo preparado, faltando somente fazermos o código para o funcionamento do esquema proposto. Após a tag que insere a biblioteca Jquery, abriremos outra tag <script></script> e dentro dela é que colocaremos nosso código para que quando clicarmos na div id=click a div=show exiba-se.

Mas antes alguns conceitos:

Sempre, após ter feito uma linha de comando terminado com ponto e vírgula (;) isso indica que a partir deste começamos novo comando, e // ou /**/ são utilizados para comentar algo.
Para podermos selecionar um elemento dentro de uma página html, temos que usar um seletor, e em JQuery ele é o símbolo $(). Toda vez que este símbolo aparecer ,quer dizer que estamos pegando um objeto da página, seja ele um elemento (TAG), exemplo body, ou um elemento pelo seu id, por exemplo #show, ou mesmo pela sua classe, exemplo .texto.
Mas como pegamos o objeto? Passando como parâmetro entre aspas o nome do elemento, id ou classe. Ficando assim $(‘#show’), ou $(‘body’).
Podemos colocar o conteúdo pego pelo seletor dentro de uma variável, exemplo: var $divShow = $(‘#show’); Este exemplo coloca dentro da variável $divShow o conteúdo pego pelo seletor $(‘#show’), neste caso estamos dizendo que a variável passa a ser o div id=”show” do documento html carregado.
Veja que usei como padrão de nome da variável o símbolo $ antes do nome $divShow, poderia ter colocado qualquer nome, geralmente usamos esse padrão para indicar que estamos manipulando um objeto sem ser por seu valor, mas o objeto (elemento) em si.
Outro conceito para Jquery é que seus comandos são em funções, e podemos fazer cadeias de funções, ou seja, sua execução são funções dentro de funções. Parece complexo... rsrsrs... mas não é, na verdade é super simples. Veja esse exemplo, para podermos começar a execução JQuery já usamos uma função.

É a $(document).ready();

Então, lembra-se do seletor, aqui estamos dizendo que após lido o documento html, alguma coisa vai acontecer, mas o que? O que programarmos para acontecer... rsrsrs

Então obrigatoriamente todo inicio de programação para o documento Jquery será o seguinte comando:

$(document).ready(function(){

//Aqui código que queremos que execute.

});

Agora assim vamos ao código para mostrar a div após o clique:

 <!-- Inicio do nosso código Jquery --> <script> //Aqui inicio do código Jquery $(document).ready(function(){ /*Criaremos as variáveis que armazenaram os objetos que desejamos fazer algum procedimento*/ var $divShow = $('#show'); var $divClick = $('#click'); /*Vamos criar um evento, quando clicarmos na div id=click, quero que algo aconteça, então para isso, precisamos escrever o comando .click, abaixo segue a descrição de como fazer.*/ $divClick.click(function(){ /*Aqui vem o camando que exibe a div id=show Para isso usamos um comando chamado .toggle, ele basicamente faz a div ser exibida de acordo com os parâmetros que passamos*/ $divShow.toggle('slow', function(){ /*o parâmetro slow indica q transição de exibição da div será lenta*/ }); }); }); </script>

Pronto agora é salvar e testar, abaixo segue o projeto pronto para download, este foi um exemplo bem simples de como funciona a Jquery, seus comandos são inúmeros, aqui aprendemos o (.ready) o (.click) e o (.toggle), também os conceitos de seletores e manipulação em variáveis.

Fora os conceitos Jquery, também abordamos a criação básica de uma página em html e também sua formatação em css.

No site //jquery.com/ podemos encontrar toda a documentação sobre os comandos Jquery, acesse e divirta-se.

Fonte: //jquery.com/

Exemplo completo para download aqui.

Dúvidas, sugestões ou criticas deixem seus comentários e bom estudo.