<http://schema.org/articleBody>
"Um dos recursos mais procurados pelos designers (e programadores) em bibliotecas \u00E9 anima\u00E7\u00E3o. Existem bibliotecas e mais bibliotecas que fazem anima\u00E7\u00F5es de diversas formas. Em prototype por exemplo, deve-se anexar a biblioteca scriptaculous para que seja possivel realizar anima\u00E7\u00F5es. J\u00E1 em mootools existem v\u00E1rias formas de resolver o mesmo problema, sendo assim um pouco mais complicado de lembrar de tudo isso. Por jQuery ser uma biblioteca simples com somente o funcional, o trabalho se torna mais simples, logo mais r\u00E1pido de desenvolver as solu\u00E7\u00F5es.\r\n\r\nEm jQuery - como j\u00E1 vimos aqui e aqui, temos anima\u00E7\u00F5es que podemos usar nos projetos: slideUp, slideDown, slideToggle, fadeIn, fadeOut e fadeTo, al\u00E9m de show e hide. S\u00E3o efeitos simples que voc\u00EA pode utilizar em qualquer lugar, e suas nomenclaturas tamb\u00E9m sao simples a ponto de serem intuitivas na hora do servi\u00E7o de fato.\r\n\r\n&lt;h3&gt;Slide&lt;/h3&gt;\r\n\r\nQue tal experimentar fazer uma \u00E1rea onde o usu\u00E1rio clica em um bot\u00E3o de mostrar/ocultar menu? Com apenas duas tags, a jQuery consegue executar essa tarefa.\r\n\r\nTomemos a seguinte marca\u00E7\u00E3o:\r\n\r\n[cc lang=\"html\"]&lt;div&gt;\r\n&lt;!--\r\nAqui vem a \u00E1rea, que voc\u00EA pode manipul\u00E1-la como quiser,\r\nexperimente um formul\u00E1rio de login ou um menu inline ou uma\r\nbela imagem.\r\n--&gt;\r\n&lt;/div&gt;[/cc]\r\n\r\nApenas com HTML e CSS fazemos a &lt;a href=\"http://dgmike.com.br/tableless/jquery/caixa-de-ferramentas-simples.html\"&gt;vers\u00E3o que funcionar\u00E1 sem javascript&lt;/a&gt;. Pense sempre dessa forma, assim voc\u00EA n\u00E3o corre o risco de fazer javascript obstrusivo. \u00C9 por isso que n\u00E3o foi colocado o link onde o usu\u00E1rio clicar\u00E1 para aparecer e sumir com a \u00E1rea. Veja como ficar\u00E1 este &lt;a href=\"http://dgmike.com.br/tableless/jquery/caixa-de-ferramentas.html\"&gt;exemplo estilizado&lt;/a&gt; com apenas com algumas linhas de c\u00F3digo de CSS.\r\n\r\nFeita a primeira e a segunda camada (conte\u00FAdo feito no HTML e apresenta\u00E7\u00E3o feita no CSS) partimos para a intera\u00E7\u00E3o, que quem comanda \u00E9 a jQuery. Primeiro, precisamos adicionar o link onde o usu\u00E1rio poder\u00E1 clicar para fazer a \u00E1rea sumir e reaparecer, faremos isso dinamicamente com a ajuda do nosso Framework preferido. Com o m\u00E9todo after (depois em ingl\u00EAs) adicionamos facilmente o nosso link.\r\n\r\n[cc lang=\"javascript]$('#area').after('&lt;a id=\"mostra-esconde-area\" href=\"#area\" title=\"Mostrar/Esconder \u00C1rea\"&gt;Mostrar/Esconder \u00C1rea&lt;/a&gt;')[/cc]\r\n\r\nAp\u00F3s isto, s\u00F3 precisamos adicionar a anima\u00E7\u00E3o ao nosso bot\u00E3o, fazendo ele animar a \u00E1rea desejada. Com o comando toggle, nem precisamos nos preocupar com o estado no qual a \u00E1rea se encontra, afinal, ele vai aparecer e desaparecer conforme o necess\u00E1rio.\r\n\r\n[cc lang=\"javascript]$('#mostra-esconde-area').click(function(){\r\n$('#area').slideToggle()\r\n})[/cc]\r\n\r\nN\u00E3o esque\u00E7a que estes comandos devem estar dentro da fun\u00E7\u00E3o de inicializa\u00E7\u00E3o da jQuery. Ent\u00E3o o script final ficar\u00E1 assim.\r\n\r\n[cc lang=\"javascript]$(function(){\r\n$('#area').after('&lt;a id=\"mostra-esconde-area\" href=\"#area\" title=\"Mostrar/Esconder \u00C1rea\"&gt;Mostrar/Esconder \u00C1rea&lt;/a&gt;')\r\n$('#mostra-esconde-area').click(function(){ $('#area').slideToggle() })\r\n})[/cc]\r\n\r\nAo todo para fazermos a anima\u00E7\u00E3o e a intera\u00E7\u00E3o, n\u00E3o gastamos mais que cinco linhas de c\u00F3digo javascript. Veja no &lt;a href=\"http://dgmike.com.br/tableless/jquery/caixa-de-ferramentas-animado.html\"&gt;exemplo final&lt;/a&gt; (&lt;a href=\"http://dgmike.com.br/tableless/jquery/caixa-de-ferramentas-simples-animado.html\"&gt;ou com pouco CSS&lt;/a&gt;), como esse tipo de intera\u00E7\u00E3o pode dar um g\u00E1s na sua aplica\u00E7\u00E3o.\r\n\r\n&lt;h3&gt;Opacidade&lt;/h3&gt;\r\n\r\nUma outra propriedade que a jQuery trabalha e que pode resultar em \u00F3timas melhorias na usabilidade do usu\u00E1rio \u00E9 a propriedade &lt;em&gt;opacity&lt;/em&gt;. Ou seja, a transparencia dos elementos, e gra\u00E7as aos m\u00E9todos &lt;em&gt;fadeIn&lt;/em&gt;, &lt;em&gt;fadeOut&lt;/em&gt; podemos fazer um &lt;em&gt;tooltip&lt;/em&gt; com poucas linhas de c\u00F3digo.\r\n\r\nPrimeiro, escrevemos o HTML necess\u00E1rio. Sempre pensando de forma n\u00E3o obstrusiva, ou seja, se o navegador do usu\u00E1rio n\u00E3o tiver javascript habilitado, ele n\u00E3o deve ter sua navegabilidade atrapalhada.\r\n\r\n[cc lang=\"html\"]&lt;ul&gt;\r\n  &lt;li&gt;&lt;a href=\"google.com\" title=\"Encontre o que voc\u00EA procura\"&gt;Google&lt;/a&gt;&lt;/li&gt;\r\n  &lt;li&gt;&lt;a href=\"tableless.com.br\" title=\"Webstandards com Feij\u00E3o e Farofa\"&gt;Tableless&lt;/a&gt;&lt;/li&gt;\r\n&lt;/ul&gt;[/cc]\r\n\r\nCom algumas linhas de CSS aplicamos uma &lt;a href=\"http://dgmike.com.br/tableless/jquery/tooltip-simples.html\"&gt;interface interessante&lt;/a&gt; para nosso menu. Para a constru\u00E7\u00E3o usamos o atributo &lt;em&gt;title&lt;/em&gt;, assim o usu\u00E1rio que n\u00E3o estiver com o javascript habilitado poder\u00E1 navegar no site vendo todos os recursos que ele teria se o javascript estivesse habilitado.\r\n\r\nA primeira tarefa da jQuery \u00E9 criar um span onde vamos colocar o mesmo texto do atributo. N\u00E3o podemos manipular o atributo title, ele fica com o padr\u00E3o do sistema operacional do usu\u00E1rio, j\u00E1 um span podemos implementar o que nossa imagina\u00E7\u00E3o mandar, at\u00E9 mesmo criar bal\u00F5es colocando backgrounds, se necess\u00E1rio.\r\n\r\nPara fazer isso, precisamos usar o m\u00E9todo &lt;em&gt;each&lt;/em&gt;, que percorre todos os elementos chamados aplicando a cada um uma diretiva espec\u00EDfica.\r\n\r\n[cc lang=\"javascript]$('#menu li a').each(function(){\r\n  $(this).append('&lt;span&gt;'+this.title+'&lt;/span&gt;')\r\n  this.title=''\r\n})[/cc]\r\n\r\nNo m\u00E9todo each n\u00F3s passamos uma fun\u00E7\u00E3o, nessa fun\u00E7\u00E3o, a palavra-chave \"this\" indica o item que est\u00E1 sendo tratado pelo each (um de cada vez), ou seja, cada link espec\u00EDfico. A cada link &lt;em&gt;appendamos&lt;/em&gt;, ou seja, adicionamos ao fim de seu conte\u00FAdo o valor de seu atributo title dentro de uma tag span. Depois, limpamos o valor de seu title. Assim, removemos o tooltip original, deixando apenas o que ser\u00E1 aplicado nos pr\u00F3ximos passos.\r\n\r\nAgora, a m\u00E1gica. Adicionamos aos links a a\u00E7\u00E3o de hover que ir\u00E1 exibir seus filhos (o span que acabamos de adicionar) e ao mesmo tempo adicionamos a a\u00E7\u00E3o de sumir quando ele sair, fazemos isso com o pr\u00F3prio hover. Poderiamos fazer isso com os m\u00E9todos &lt;em&gt;show&lt;/em&gt;, &lt;em&gt;hide&lt;/em&gt; ou mesmo o &lt;em&gt;toggle&lt;/em&gt;, mas para ficar mais interessante para o usu\u00E1rio, resolvi usar &lt;em&gt;fadeIn&lt;/em&gt; e &lt;em&gt;fadeOut&lt;/em&gt;. Veja que mesmo assim, o c\u00F3digo n\u00E3o fica t\u00E3o imposs\u00EDvel de entender.\r\n\r\n[cc lang=\"javascript]$('#menu li a').hover(function() {\r\n  $(this).children().show()\r\n},function(){\r\n  $(this).children().hide()\r\n})[/cc]\r\n\r\nEnfim, aplicamos estes dois trechos de script ao nosso \"inicializator-jquery\" que far\u00E1 com que esse script seja executado apenas ap\u00F3s carregar a p\u00E1gina, ou seja, quando todos os elementos j\u00E1 tiverem sido carregados. Tamb\u00E9m adicionamos ao CSS algumas linhas de c\u00F3digo para deixar o tooltip amig\u00E1vel. &lt;a href=\"http://dgmike.com.br/tableless/jquery/tooltip-simples-animado.html\" title=\"Tooltip simples animado com JQuery\"&gt;Veja como \u00E9 muito&lt;/a&gt; interessante esse efeito, agora com o nosso novo tooltip.\r\n\r\nA jQuery manipula muito bem efeitos simples (mas que resolvem a esmagadora quantidade de problemas) que muitas bibliotecas insistem em deixar confuso demais ou complexo demais por adicionar mais e mais configura\u00E7\u00F5es para cada efeito. Por isso jQuery \u00E9 uma ferramenta muito poderosa."^^<http://www.w3.org/2001/XMLSchema#string>
<http://tableless.com.br/animando-com-jquery/>