Criando um portflio on-line de sucesso

Por Sean Hodge

04 maro de 2008

Carteiras , Princpios , Web design 114 Comentrios Anncio

Criando um portflio de sucesso mais fcil do que voc pensa. Concentre-se na simplicidade, facilidade de uso, atingindo seus objetivos, gerir profissionalmente o projeto, e voc vai acabar com um portflio bem-sucedido. Neste artigo iremos analisar cinco armadilhas que comumente afligem design portflio. Ento, ns vamos cobrir Dicas portflio que se cuidadosamente considerada e bem executado vai entregar resultados de qualidade para o seu portfolio. Existem alguns erros comuns que os designers fazem em suas carteiras. Vamos rever essas armadilhas comuns para ter certeza de que voc no caia em uma dessas armadilhas. Pitfall # 1: Obfuscation Clareza e foco deve permear sua carteira. Com a linguagem no use vinte palavras quando sete far. Empurre o melhor contedo para a frente. Quando possvel colocar um contedo importante acima da dobra. Evite sinuoso na sua lngua ou caminhos em seu site. Mantenha o seu portfolio para o mnimo de nveis de profundidade, enquanto ainda realizar seus objetivos. Durante a Copyblogger h um artigo que cobre uma lista simples de escrever dicas do homem conhecido por cortar o fluff de escrever no incio do sculo XX. Veja o artigode Ernest

Seu portflio a vitrine do seu trabalho, suas habilidades e seu potencial para seus futuros empregadores.Quanto mais tempo e esforo que voc dedica para um projeto til e de boa aparncia, maiores so suas chances de obter melhor saldo da conta no final do ms.Ento, como voc pode ter certeza que sua carteira melhor do que as carteiras de seus concorrentes? Como voc pode apontar a ateno do empregador as suas obras?

Hemingway Top 5 dicas para escrever bem . Hemingway defendeu usando frases curtas, linguagem forte e clareza.Todos os princpios que tornam a escrita eficaz na web.

O Portfolio de Evan Eckard um exemplo de um site que promove o trabalho desde a primeira pgina e fica a ele rapidamente. No artigo Criando A Carteira Perfeito autor Collis Ta'eed oferece conselhos portflio a partir da perspectiva de um potencial empregador. Um de seus seo intitulada Get a ele sobre as razes para limitar o nmero da carteira de peas que voc tem e fazer encontrar as melhores peas de portflio fcil. Um potencial empregador precisa rever muitos candidatos potenciais rapidamente. Voc mais provvel para fazer o corte, se o seu melhor trabalho promovido destaque. O Portfolio de Evan Eckard um exemplo de um site que promove o trabalho desde a primeira pgina e chega a elerapidamente. Pitfall # 2: Informaes Congestionamento No uma questo de querer dizer muito em muito pouco espao ao criar seu portfolio. H um equilbrio que precisa ser alcanado com quantas pginas profundo voc tem usurios que clicam para mais informaes e como as informaes quanto voc tenta caber em uma pgina. Esta uma questo a ter em conta na construo de seu portflio. Quanto mais apertado voc arrumar sua carteira o mais provvel ser exibido desordenado. Se voc precisa colocar uma grande quantidade de informaes em uma pgina ver o post Grid and Designs Coluna em cima da parede do Web Designer.Ele vai lhe dar algumas boas idias sobre como voc pode usar a rede a seu favor quando apresenta uma grande quantidade de informaes.

Este artigo vai lhe dar algumas boas idias sobre como voc pode usar a rede a seu favor quando apresenta uma grande quantidade de informaes. Pitfall # 3: exagerar Voc menos provvel dar errado se voc manter as coisas simples e organizada.Voc pode aplicar essa mentalidade de todas as reas de sua carteira. Menos mais.Quanto mais voc tenta fazer em sua carteira mais chances existem para que as coisas do errado. Se voc est tentando mostrar dezoito servios que voc oferece, voc ter menos sucesso do que promover um pouco proeminente. Se voc mostrar muitos tipos de trabalho ou tentar mostrar muito trabalho de qualquer tipo que voc provavelmente vai afogar o usurio. Eles no vo encontrar suas peas importantes que mostram o quo grande o seu trabalho. Pitfall # 4: Navegao Uncommon Designers tem um desejo de se destacar como nico . O ltimo lugar para seguir este impulso est na navegao do seu site. uma questo de nmeros. Se um grande nmero de pessoas que vm ver a sua carteira vai ter dificuldade em navegar atravs dele, sua carteira no vai conseguir cumprir os seus objetivos. Na Astheria blog na ps My Last Portfolio sugado, a sua pode Too o autor aponta alguns excelentes exemplos de opes de navegao para evitar. Neste artigo Kyle Meyer analisa 200 carteiras e aponta os problemas com o uso deles. Problemas de navegao feito mais de 32 por cento dos problemas encontrados.

Este artigo apresenta alguns excelentes exemplos de opes de navegao para evitar. Pitfall # 5: Clutter Visual Considere a finalidade de qualquer elemento decorativo que voc traz para a sua carteira. Se eles se encaixam seus objetivos e elogiar seu trabalho que timo. Caso contrrio, removlos. O espao em branco ajuda a dar um toque profissional ao seu portflio. Os elementos

visuais mais voc tenta empurrar para uma rea mais difcil ser manter um sentimento de profissionalismo. Considere a hierarquia visual como uma forma de levar a sua visualizao atravs da pgina. No Boxes and Arrows o artigo Narrativas visveis: Compreender Organizao Visual explica os princpios de hierarquias visuais.

Na entrevista , onde o design Visual Atende Usabilidade - Entrevista com Lucas Wroblewski, Parte II tanto hierarquia da pgina e poluio visual so abordados. No artigo que resume alguns dos de Edward Tufte ensinamentos sobre como evitar dados suprfluos. 12 Princpios do Design Portfolio eficaz Abaixo voc vai encontrar 12 sugestes que voc pode usar para melhorar o seu portfolio ou acertar da primeira vez ao projetar a partir do zero. Por favor, tenha em mente que algumas destas sugestes exigir pacincia, tempo e um monte de planejamento. No entanto, vale a pena. E os exemplos a seguir mostram que se pode alcanar excelentes resultados com apenas seguindo estas 12 regras simples. 1. DEFINA OS SEUS CRITRIOS E ESTRATGIAS PARA O SUCESSO Como em qualquer projeto que vai ajud-lo a esclarecer seus objetivos antes de comear. Depois de saber seus objetivos, ento isso afetar cada deciso que voc faz sobre a criao de sua carteira. Abaixo esto alguns objetivos comuns carteira . Alm disso, esteja ciente de que, muitas vezes carteiras de tentar realizar mais de um gol. Ou, considere a criao de mais de uma carteira que serve a um propsito diferente. A me contratar Portfolio se concentra em obter um emprego. Se voc est activamente procura de um emprego, ento a meta atual de sua carteira para ser contratado. Neste tipo de carteira voc pode direcionar o trabalho que voc mostrar para o tipo de empresa que deseja trabalhar. A Gerao carteira de vendas se concentra em manter um fluxo de trabalho sempre chegando na porta. O objetivo aqui gerar leads. E mover os potenciais clientes atravs de seu canal de vendas. O Reputation Edifcio Portfolio concentra na construo de seu nome na indstria e online. Isto pode assumir a forma de vitrine de um artista. Ou amarrar o seu trabalho em conjunto com um blog em seu portfolio site. O portflio de networking se concentra na construo de relacionamentos. H muitas redes que possuem excelentes ferramentas de construo de carteiras.Eles tm algumas vantagens em colocar seu portflio em seu site.Principalmente entre eles aproveitar o espao do site para a rede. 2. CONSIDERE O USO DE MLTIPLAS CARTEIRAS Existem vrias razes para ter mais de um portfolio . Voc pode ter mais de um conjunto de habilidades que voc gostaria de promover separadamente. Voc pode querer criar um portfolio que direcionado para conseguir um emprego especfico e envi-lo para um diretor de marketing de uma empresa. Eles vo apreciar isso. Ele economiza tempo e mostra que voc realmente quer o trabalho. Mesmo se o seu portfolio uma pgina. Mesmo se voc est preenchendo a carteira com o mesmo trabalho que voc ainda vai se beneficiar por ter vrias carteiras dentro de diferentes grupos online. Tomemos o caso de Nik Ainley, um designer e ilustrador do Reino Unido. Ele tem vrias carteiras que servem todas as

metas de cortesia. Ele escolheu para participar de vrias portfolio baseado em comunidades para construir sua reputao e rede com outros designers.Seu site binrio brilhante recebeu mais de 1 milho de visitantes.

Ele tem um portflio no Behance . Ele est envolvido em inmeros grupos de l e tem um grande Inner Circle. E ele exibe com destaque que ele est disponvel para Freelancing, contrato de longo prazo, Aluguer de Full-Time, ou do trabalho Consulting.

Nick tem um muito popular Portfolio no DeviantArt . Ele tem sido um membro l desde 2004. Ele tem mais de 80 peas de Carteira e mais de 1.000 comentrios sobre o seu trabalho l. Ele tem um monte de fs que tm as suas obras marcadas como favoritas.

Ele menos ativo que ele tem uma galeria em CPLUV . Seu Portfolio em Depthcore realmente bom. Este site apresenta artistas que tm que ser convidados a contribuir.Assim, a qualidade do trabalho deste site muito alto.

No geral Nik Ainley mostra como voc pode se beneficiar de ter vrias carteiras online, mesmo quando o trabalho que esto apresentando semelhante em cada carteira. Isso porque voc est gravando em uma comunidade diferente com cada carteira que voc cria. Voc vai se encontrar com as pessoas, expondo-as ao seu trabalho, e fazer novas conexes , colocando o seu portfolio em diferentes comunidades. Algumas comunidades carteira para olhar:

Behance Rede Carteiras Coroflot Deviant Art CPULuv Flickr 3. SEU MERCADO-ALVO Quanto mais voc direcionar o seu projeto para um mercado especfico, mais ele vai falar com o visitante dentro desse mercado. Se voc est olhando para aterrar clientes corporativos em um setor conservador do que presente-los com o trabalho que limpo, comercializvel, e olha bem sucedida. No mostrar o trabalho irritado, sujo, ou artstico, a menos que esse o mercado que voc est indo depois. No artigo O segredo para obter um lote de Web Design Trabalhe o autor tem uma seo de "Projeto da carteira voc acha que seus clientes querem ver." Este o ponto.Faa sua carteira focada em seu mercado-alvo. Se voc est tentando fazer com que os clientes, em seguida, projetar manter esses clientes em mente. H mais benefcios definidos para atingir um mercado especfico. No artigo Encontrar um mercado-alvo a autora Barbara Pellow discute ambas as abordagens verticais e horizontais para o marketing de destino. Ela identifica alguns dos benefcios adicionais de marketing de destino. Falando para um pblico especfico permite que voc se torne um especialista reconhecido no campo mais fcil. Segmentao do seu mercado pode diferenciar seus servios. Considere este exemplo : um web designer especializada em designer de Lei sites empresa tem um mercado-alvo diferente de uma empresa que constri sites de Rock Band. A linguagem, grficos e abordagem carteiras sch tomar vai ser muito diferente.Se um web designer tem inmeros sites empresa bem sucedida lei no seu portfolio que vai torn-lo mais fcil para um potencial cliente escritrio de advocacia para escolh-los em detrimento de outro designer ou agncia de design.

A designer mais provvel que se destacam por alvo um mercado especfico. Sua taxa de sucesso no desembarque de empregos em um nicho especfico e ser percebido como um

especialista nessa rea vai aumentar. D uma olhada no Dan Gilroy Portfolio Design para um exemplo de um site que tem como alvo com sucesso um mercado especfico. Ter um mercado-alvo em mente essencial para escolher o seu portflio de peas e sua abordagem para projetar seu site. 4. FAA USABILIDADE PRIORIDADE MXIMA Navegao uma considerao superior como um usurio ser capaz de ver o seu portfolio de suma importncia. Veja o ponto sobre navegao Uncommon acima.Algumas outras consideraes esto usando padres web. Isto especialmente verdadeiro se voc est procurando um emprego como web designer hoje. Leia este artigo Cinco passos para um melhor portflio de design por Jefferey Veen. Nela, ele discute algumas questes em torno das melhores prticas em sua carteira em relao a como vai ser percebida por um potencial empregador. Alm disso, no descontar os robs de busca. Trabalhar para melhor Search Engine Optimization. O blog em SEOBook um recurso rico sobre este tema. Bom SEO ir melhorar a capacidade de potenciais clientes para encontr-lo atravs dos motores de busca. 5. UTILIZAR A TECNOLOGIA CERTA Se houver tecnologias inerentes a sua descrio de trabalho, ento pode fazer sentido para construir o seu portflio com essa tecnologia. Se o Flash legal, mas certo para o seu site. Provavelmente no, se voc um designer logo. Mas se voc est tentando conseguir um emprego como Designer do Flash em um top de linha interativa Agncia de Design como histria mundial do que sua a escolha certa. A New Media Designer Portfolio de Mathew V. Robinson apresenta uma navegao fcil de usar. Essencial para o sucesso de um site em Flash, rpido carregamento.Sua carteira altamente usvel e parece timo.

Considere manuteno ao decidir sobre tecnologias. Simplificar a sua carteira, tanto quanto possvel facilitar o tempo que voc vai ter que gastar em atualizar ou fazer alteraes no site. Voc deve considerar o quo fcil para adicionar e remover carteira pedaos. O mais fcil o mais provvel que voc vai atualizar seu portfolio em uma base regular. Jamie Gregory tem um portfolio simples, elegante e eficaz pgina. Ele teria nenhuma dificuldade em adicionar ou trocar peas a partir desta carteira.

Considere realce quando se olha para a tecnologia. Muitas vezes, uma escolha sbia adicionar um pouco de Javascript ou outras tecnologias, em vez de confiar neles. Ele pode ajudar voc a atingir seus objetivos sem demasiado complicar seu projeto de portfolio. Ao visitar Portfolio de Marius Roosendaal ter um momento para explorar como limpar o cdigofonte . Isto feito, proporcionando solues elegantes baseadas em Javascript.

Escolher entre criar um site esttico ou utilizando um CMS (Content Management System). Um carteiras pgina so realmente fceis de atualizar e uma boa maneira de mostrar rapidamente o seu melhor trabalho. Voc tambm no ter problemas com a navegao, como h apenas uma pgina. Embora haja pouca flexibilidade l e voc no est aproveitando alguns recursos adicionais que os sistemas de gerenciamento de contedo tm para promover o seu trabalho, como ter um blog. 6. PLANEJE SUA PROJECT PORTFOLIO Um dos ingredientes fundamentais para a criao de um portflio de sucesso abord-lo como se fosse um projeto do cliente . Gerenciar este projeto como profissionalmente como faria

com qualquer outro projeto web voc assumir. Separe o tempo necessrio para alcanar os objetivos que voc delineadas para o portfolio.Certifique-se de configurar prazos para que voc tenha metas fundamentais para bater. 7. RESTRINGIR O ESCOPO EO TIPO DE TRABALHO PROMOVIDO Sua carteira deve ser limitada ao melhor trabalho que voc ir promover no mbito das suas metas. Se voc est tomando no site redesenha ento sua carteira deve consistir apenas de que, no logotipo desenhos ou trabalho de impresso que voc fez. Se no o trabalho que voc est alvejando que no inclu-lo. Voc ser mais bem sucedido. Jesse Bennett-Chamberlain redesenhou seu website 31three.com em maio de 2007.Antes de fazer isso, ele costumava ter de impresso e logotipo projetos em sua carteira. No redesign ele esclareceu seu mercado-alvo, concentrando-se em ajudar os desenvolvedores com design. Sua carteira atual s apresenta site e interface de projetos ele criou, porque o tipo de trabalho que ele est procurando. Esta carteira muito bem sucedido em muitos pontos e tem sido referenciada em vrios artigos na blogosfera.

Isso no significa que ele no faz o logotipo ou design de identidade. Ele faz isso, mas ele reconheceu que o design do logotipo no por isso que as pessoas vm a ele.Eles vm a ele para projetos de websites para os sites novos ou existentes e design do logotipo pode ser uma parte do pacote. Veja mais sobre seu processo neste artigoRedesenhar o site ExpressionEngine . Certamente alguns designers ou empresas tero carteiras de saco misturado .Quanto mais tipos de trabalho que voc faz com sucesso o maior desafio que voc tem em promover esse trabalho. Quando possvel manter o trabalho em exposio a um mnimo. Exibindo 10 de suas melhores peas de trabalho muitas vezes melhor do que a exibio de 50 peas boas. 8. FORNECER INFORMAES ADEQUADAS DE CONTATO, DOCUMENTAO E EXPLICAES As informaes de contato deve ser fcil de encontrar e, no caso de formulrios de contato devem ser fcil de usar. Proeminente colocar esse tipo de informao. OPortfolio Hicksdesign tem informaes de contato exibidas bem em todas as pginas.

Ela ajuda a construir a confiana com o seu mercado-alvo para esclarecer o seu papel nos projetos que voc apresenta em sua carteira. Se voc criou o site, mas algum codificado, ento afirmar que. Se voc fez tudo, ento confiantemente declarar que to bem. O Portfolio de Cameron Moll emprega essa estratgia em cada pea carteira.

Proporcionar estudos de caso d uma viso mais profunda em seu processo. Uma vez que um potencial empregador ou cliente tenha reduzido a sua lista eles podem voltar e comear a tomar mais tempo com sua carteira. Os estudos de caso mostrar como competente e completa o seu processo . David Airey faz um bom trabalho de fornecer fcil encontrar estudos de caso em suas peas de portflio.

Depoimentos de clientes so eficazes para persuadir aqueles que visitam o seu site que voc vai cumprir suas promessas. Ele aumenta o nvel de profissionalismo ao incorporar bom gosto depoimento em sua carteira. David Airey tem um artigo intitulado A Importncia do Cliente Testemunhos que tem informaes teis sobre este assunto. 9. APRESENTAR O SEU TRABALHO DENTRO DOS LIMITES DE SEUS OBJETIVOS Seu trabalho precisa para se destacar em primeiro lugar em sua carteira. Se o seu portfolio design do site domina a obra em exposio, ento voc no provvel para atender seus objetivos do site. Considere cuidadosamente cada elemento visual que voc adicionar ao projeto. Quando tiver certeza atirar para simplificar. 10. INFUNDIR A SUA PERSONALIDADE EM SEU PROJETO Nick La tem um design portflio que mostra seu estilo de design e interesses. A ilustrao do fundo original destaca. No interfere com a capacidade de utilizao do local, mas d-se um belo invlucro. Para alguns, isso seria muito e interferir com o trabalho que est sendo apresentado. Embora o trabalho apresentado em seu portfolio funciona bem. Ele define a carteira peas contra um fundo branco slido em um design forte coluna-based. O trabalho apresentado se encaixa com o estilo do sites de ilustrao. Tirando este tipo de infuso pessoal no design do seu site difcil de alcanar. Fazendo isso tambm faz com que sua carteira no s memorvel, mas notvel! Nick La alcanado enorme sucesso com o seu portfolio para N.Design estdio . Ser notvel na concepo da sua carteira, muitas vezes significa levar a bom termo o gosto pessoal de design exclusivo para voc que tem sido cultivada ao longo dos anos.

Seth Goden tem alguns excelentes pontos sobre ser notvel em seu posto como ser notvel . Aqui est uma citao do post "remarkability est nas bordas. O maior, mais rpido, mais lento, mais rico, mais fcil, mais difcil. "Este um bom ponto, mas h um enorme risco envolvido nessa busca a borda notvel voc andar para a direita fora do penhasco. Considerar cuidadosamente como voc vai misturar os seus elementos pessoais notveis em sua carteira , sem sacrificar a usabilidade e sem desalinhando o equilbrio entre a proeminncia de seu portfolio eo projeto do prprio site. 11. PROMOVER E ALAVANCAR O SEU TRABALHO Existem muitas tcnicas para promover o seu portfolio. Considere juntar profissionais comunidades on-line e em rede com outros membros da comunidade. J olhei para algumas comunidades que voc pode colocar um portfolio on. Coloque um fio em um frum de design sobre o seu portfolio. Envie o seu projeto para a galeria websites.Quase qualquer tcnica que pode ser usada para promover um stio pode ser usado para promover a sua carteira. Adicionar um blog para seu site. Quanto mais trfego voc pode puxar para o seu site mais exposio do seu portfolio receber. Dan Cederholm foi um dos primeiros a adotar esta tcnica e alcanou a fama com seu blog, Simplebits . Seu portfolio reside com sucesso no mesmo site.

Aproveitando o seu trabalho envolve ligando para ela quando voc envia e-mails .Incluir um link para seu site portfolio em seu perfil no Facebook ou de qualquer outra comunidade a que pertence. Infundir a sua carteira de local dentro de suas comunicaes e sua identidade online. 12. DESENVOLVER SEUS OBJETIVOS CARTEIRA DE LONGO PRAZO Ele sempre ajuda a ter uma viso para o futuro . Sua carteira necessidades so susceptveis de mudar muitas vezes como voc desenvolve projetos diferentes ao longo de sua carreira. Apesar de sequer olhar para o conjunto de 2008, e no s na prxima semana pode fazer uma grande diferena nas escolhas que voc faz ao criar seu portfolio. Juntando tudo : um portflio de sucesso encontra aquela mistura perfeita de sua personalidade, a proeminncia do trabalho, simplicidade e facilidade de uso que faz o seu portfolio destacam-se da multido e alcanar seus objetivos.

Pr-visualizao da imagem em movimento com JQuery

Hoje veremos como incluir um efeito diferente nas imagens dos posts. Trata-se de um efeito de pr-visualizao em movimento das imagens dos posts, que funciona a base de um script desenvolvido por Alen Grakalic, autor dosite CSS Globe em conjunto com o JQuery. Com base no efeito que o script gera, eu fiz uma adaptao na chamada do cdigo HTML e acrescentei um pouco de CSS para ter um melhor funcionamento no Blogger.

Neste efeito, quando passamos o mouse em cima de cada imagem miniatura, o script faz com que se abra uma pop up para visualizao da imagem em tamanho maior. Para conseguir este efeito, necessrio a incorporao de javascript base da biblioteca JQuery e insero de cdigos CSS em seu template. Este script funciona em conjunto com a biblioteca do JQuery, caso voc j tenha esta biblioteca instalada em seu blog, no ser necessrio repetir a chamada dela( linha destacada na cor azul no cdigo) V na aba design em Editar HTML e procure pela tag </head> E cole logo ACIMA dela o cdigo a seguir:
Pegar cdigo http://www.mundoblogger.com.br/2011/01/pre-visualizacao-da-imagem-comjquery.html

2. APLICAR ESTILOS CSS

No menu modelo, entre na edio HTML do seu template, no precisa clicar em expandir modelos de widgets e procure pela tag ]]></b:skin> e cole o seguinte cdigo logo ACIMA dela:

ul#imagepreview{ margin:0; padding:0; } ul#imagepreview li { list-style:none; float:left; display:inline; margin-right:10px; } #preview{

position:absolute; border:1px solid #ccc; background:#000; padding:5px; display:none; color:#fff; } /*---Edite cor da fonte---*/ /*---Edite cor da borda---*/

/*---Edite cor de fundo---*/

Obs: Todos os trechos editveis j esto identificados e destacados no cdigo.

3. ATIVAR O EFEITO NAS IMAGENS

Para usar o Efeito em Imagens dentro do post, necessrio que voc hospede a imagem que vai utilizar, em algum servidor de imagem qualquer, como o Picasa Web, por exemplo. Lembrando que o cdigo a seguir deve ser inserido dentro da postagem a ser publicada, atravs da aba editar html no prprio editor de postagens do Blogger. Para chamar o efeito em imagens utilize o seguinte cdigo, e cole o endereo da sua imagem nos locais indicados:

<ul id="imagepreview"> <li><a href="URL-DA-IMAGEM-QUE-DEVE-APARECER-NO-POPUP" class="preview"><img src="URL-DA-IMAGEM-MINIATURA" width="200" height="200" alt="" /></a></li> <li><a href="URL-DA-IMAGEM-QUE-DEVE-APARECER-NO-POPUP" class="preview"><img src="URL-DA-IMAGEM-MINIATURA" width="200" height="200" alt="" /></a></li> </ul>

No cdigo acima, as partes destacadas em vermelho correspondem a largura e altura da imagem miniatura do post. Se preferir, voc pode ajustar esses valores. Caso queira mais imagens com esse efeito, apenas repita o procedimento quantas vezes for necessrio.

Fodaaaaaaaaaaaaaaaaaaaaaa

jQuery + CSS Melhore seus botes com o efeito Fade

inShare1 Publicado em CSS, Desenvolvimento, Tutoriais, por Domnico Citrngulo No foi toa que o jQuery se firmou como uma das melhores bibliotecas javascript disponveis. Alm de levar o desenvolvimento cross-browser a srio e ser muito fcil de usar, o jQuery tem uma enorme quantidade de plugins. Nesse post vou mostrar como voc pode us-lo para adicionar facilmente um efeito de Fade sutil e elegante aos seus botes. Download Demo

Como funciona
A mecnica simples: a funo jQuery identifica o elemento onde deve ser aplicado o efeito e insere dentro dela uma tag<span>, que quem realmente receber o Fade. Tudo o que voc precisa saber e fazer colocar um pequeno trecho javascript na sua pgina, ajustar seu CSS e adicionar uma classe ao boto que receber o efeito. exatamente o mesmo efeito que est aplicado aos botes de Download e Demo no incio do post. Voc tambm pode acessar a demonstrao e baixar os arquivos para visualizar melhor o cdigo.

O Javascript
O primeiro passo importar o jQuery normalmente. Depois s inserir a funo abaixo. Perceba que logo no incio do cdigo, na segunda linha, voc deve colocar a classe dos botes que recebero o efeito (nesse caso: efeito_fade). Todos os elementos com essa classe sero animados. 01.<script type="text/javascript" src="jquery.js"></script><br> 02.<script type="text/javascript"><br>

03.$(document).ready(function() {<br> 04.$('.efeito_fade').append('<span class="hover"></span>').each(function () {<br> 05.var $span = $('> span.hover', this).css('opacity', 0);<br> 06.$(this).hover(function () {<br> 07.$span.stop().fadeTo(500, 1);<br> 08.}, function () {<br> 09.$span.stop().fadeTo(500, 0);<br> 10.});<br> 11.});<br> 12.});<br> 13.</script>

O CSS
No CSS, a primeira coisa a fazer criar um boto comum, com a tcnica clssica de image replacement para diferenciar o estado normal (apagado) do estado :hover (aceso). Ou seja, criar uma imagem que contenha os dois estados do boto e ento estiliz-lo usando a propriedade background-position para fazer a troca de um estado para o outro quando o usurio passa o mouse sobre ele. A nica diferena que ao invs de estilizar o estado :hover em si, voc ir estilizar a tag <span> que ser criada dentro do boto como se fosse o :hover, com algumas pequenas mudanas: A primeira posicionar o boto relativamente (position:relative), para que o <span> fique corretamente colocado dentro dele. A segunda posicionar o <span> absolutamente (position:absolute) e repetir as mesmas propriedades do boto, ajustando apenas o background. Eu sei, parece complicado, mas veja como o cdigo no tem nada demais: 01./* botao 1 */ 02.#seu_botao { 03.clear: both; 04.position:relative; 05.display:block; 06.height: 64px; 07.width: 570px; 08.background:url(images/botao.png) no-repeat; 09.background-position:0 0; 10.cursor: pointer;

11.} 12.#seu_botao span.hover { 13.position: absolute; 14.display: block; 15.height: 64px; 16.width: 570px; 17.background: url(images/botao.png) no-repeat; 18.background-position: bottom; 19.} 20. 21./* botao 2 */ 22.#outro_botao { 23.clear: both; 24.position:relative; 25.display:block; 26.height: 64px; 27.width: 570px; 28.background:url(images/outro.png) no-repeat; 29.background-position:0 0; 30.cursor: pointer; 31.} 32.#outro_botao span.hover { 33.position: absolute; 34.display: block; 35.height: 64px; 36.width: 570px; 37.background: url(images/outro.png) no-repeat; 38.background-position: bottom;

39.}

O HTML
Como eu disse, a nica coisa que voc precisa fazer no seu HTML atribuir a classe indicada na funo javascript em todos os elementos que recebero o fade. Nesse caso a classe a efeito_fade. Veja o cdigo dos dois botes desse exemplo: 1.<a href="#" id="seu_botao" class="efeito_fade"></a><br> 2.<br /><br> 3.<a href="#" id="outro_botao" class="efeito_fade"></a> Veja abaixo como ficam os botes desse exemplo e perceba que, por ter um cdigo HTML extremamente simples e deixar toda a mgica para o javascript e CSS, os botes podem ser facilmente aplicados a qualquer parte do seu site. Uma dica experimentar usar essa tcnica no apenas para botes, mas tambm para menus, imagens e outros elementos interativos, tomando sempre cuidado para no exagerar na dose.

jQuery para iniciantes

inShare1 Publicado em Desenvolvimento, Tutoriais, por Domnico Citrngulo Usada por mais de 52% dos 10.000 sites mais visitados do mundo, jQuery a biblioteca javascript mais popular do momento. Open source e com centenas de plugins disponveis, tem ainda 3 outras caractersticas importantssimas: cross-browser, permite criar efeitos e comportamentos com muito pouco cdigo e otimizada ao extremo. Por isso e muito mais, se voc ainda no utiliza jQuery em suas pginas est mais do que na hora de comear. Este o primeiro post de uma srie que pretende explicar bem basicamente o que e como utilizar a jQuery no seu site.

Antes de mais nada

Para comear, pare de pensar em jQuery como um monstro desconhecido. Por enquanto, pense apenas que um arquivo JavaScript (.js) que voc deve incluir na pgina, dessa forma: 1.<script type="text/javascript" charset="utf8"src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.j s"></script><br> Pronto, voc j est usando jQuery na sua pgina. Bom, na verdade voc ainda no est usando porque ainda no fez nada com ela, mas todos os seus mtodos j esto disponveis caso voc queira usar.

O que jQuery?

Tecnicamente falando, podemos dizer que jQuery uma biblioteca JavaScript crossbrowser desenvolvida para simplificar os scripts client side que interagem com o HTML. Agora, falando praticamente vamos ver o que isso significa:

jQuery uma biblioteca JavaScript

Parece estranho pensar em um arquivo como uma biblioteca. Porm exatamente isso que ele . Mas ao invs de livros, essa biblioteca tem mtodos. Muitos mtodos. E cada um desses mtodos foi criado para cumprir uma determinada tarefa. Por exemplo, existem mtodos para alterar o valor de um campo de formulrio, para inserir um novo elemento na pgina, para aplicar um efeito de animao em um elemento, etc (Explicao: pense em elemento como sendo cada tag html dentro da sua pgina: por ex: <p>,<h2>, <img>). Agora algo importante para ter em mente: jQuery no ir fazer com que tudo funcione automaticamente para voc. Ele no faz mgica. Voc ainda ter que escrever o cdigo javascript e pensar em como fazer cada coisa A voc pergunta: ento pra qu que eu vou usar esse treco se vou ter que saber escrever javascript de qualquer jeito?!?! Isso leva segunda parte:

jQuery uma biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts

A primeira grande vantagem em usar o jQuery que todos os seus mtodos [ok, no todos, mas 99%] foram criados para funcionar em qualquer browser (IE, Firefox, Chrome, Safari, Opera, ) e j foram testados, alterados e corrigidos um milho de vezes. isso que esse cross-browser (entre browsers) quer dizer: voc pode usar os mtodos jQuery sem se preocupar se o que voc est fazendo vai funcionar no IE ou no Safari. Se funcionou em um, funciona em todos [como disse, em 99% dos casos]. A segunda grande vantagem que os mtodos jQuery so muito simples de usar e requerem muito pouco cdigo. Algo que precisava de 10, 20 linhas de cdigo com javascript cru, pode ser feito com 2, 3 linhas usando os mtodos jQuery.

jQuery uma biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts client side que interagem com o HTML
Para fechar, apenas tenha em mente que esse client-side significa que tudo o que vc faz com o jQuery acontece no computador do usurio, mais especificamente no browser. Isso por que o jQuery uma biblioteca javascript, e o javascript sempre roda no browser do usurio, diferentemente de linguagens como o PHP ou ASP que rodam no servidor onde o site est hospedado.

Primeiros passos
Para comear, vamos fazer alguma testes bem bsicos para entender como jQuery funciona. A primeira coisa a fazer importar a jQuery para sua pgina. Como disse no incio, para fazer isso basta usar essa linha: 1.<script type="text/javascript" charset="utf8"src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.j s"></script> Ok, agora temos todos os mtodos jQuery nossa disposio e podemos comear a escrever nosso cdigo. Como primeiro exerccio, vamos criar um boto que quando clicado usar um mtodo jQuery para alterar uma das propriedades do elemento <body> dessa pgina. Vou colocar o cdigo completo abaixo e explic-lo linha por linha: 1.<a class="botao" id="botao_exercicio1">Mudar backgroundcolor</a><br>

2.<script><br> 3.$('#botao_exercicio1').click(function(){ 4.$('body').css('background-color', "#f90"); 5.});<br> 6.</script> Bem, vamos ver o que o cdigo acima faz e entender os primeiros mtodos jQuery. 1.<a class="botao" id="botao_exercicio1">Mudar background-color</a> A primeira linha no tem segredo. apenas o nosso boto, que na verdade no passa de um link <a>;

Selecionando elementos com $()

1.$('#botao_exercicio1').click(function(){ Toda vez que voc ver um $() no cdigo, entenda como jQuery(), isso porque o sinal $ nada mais que uma abreviao de jQuery, o que timo pois assim voc no precise ficar escrevendo jQuery toda hora (como eu acabei de fazer). Dentro dos parnteses colocamos sempre um seletor, usado para indicar com qual elemento queremos trabalhar. Nesse caso, vou selecionar o boto no qual quero colocar a ao de mudar a cor de fundo da pgina. Existem vrias maneiras de selecionar um elemento html, uma delas usando o id do elemento, colocando # na frente dele, exatamente como fazemos no CSS:$(#botao_exercicio1). OK, selecionei o boto que tem o id=botao_exercicio1. Agora o que vou fazer com ele?

.click(function(){
Depois de selecionar nosso boto, vou usar mais um mtodo: o click(). Este mtodo usado para anexar alguma ao (mtodo) toda vez que o elemento selecionado for clicado. Chamamos esse tipo de ligao, entre um evento (clique) e uma funo, de listener. Ento no se perca: importamos o jQuery para a pgina, criamos um boto, selecionamos o boto usando $(#botao_exercicio1) e agora anexamos um listener ao evento click do boto. Agora vamos definir o que acontecer quando o boto for clicado.

css(background-color, #f90)
1.$('body').css('background-color', "#f90"); A primeira parte dessa linha voc j deve ter entendido. Estou mais uma vez usando o $() para selecionar um elemento da pgina, desta vez o <body>. Perceba que dessa vez no usei o sinal de #, porque no preciso de um id para selecionar o elemento que eu quero. S existe uma tag <body> na pgina ento posso usar apenas o nome da tag. Depois de selecionar o <body>, uso o mtodo css() para alterar uma propriedade CSS do elemento. Obviamente, nesse caso vou alterar a propriedade background-color. O mtodo recebe dois parmetros: a propriedade que ser alterada (background-color) e o valor que quero dar propriedade (#f90). Perceba que eu poderia usar o mesmo cdigo para mudar qualquer propriedade CSS que quisesse. Depois basta fechar os parnteses e chaves que ficaram abertos. Teste o que acabamos de fazer:

Mudar background-color do <body> Voltar ao background original

Observaes
- Perceba que nesse exemplo estamos importando o jQuery de um servidor do Google (https://ajax.googleapis.com). O Google disponibiliza a jQuery e vrias outras bibliotecas gratuitamente e voc pode usar esse mesmo endereo no seu site. o que chamamos de CDN (Content Delivery Network). - Voc deve sempre importar a jQuery antes de escrever seu cdigo JS. Caso contrrio, seus mtodos no estaro disponveis. - Note ainda que escrevemos o cdigo JS depois do elemento que estamos selecionando (o boto), caso contrrio, ele tambm no estaria disponvel. Falaremos mais sobre isso no prximo post.

Termos
Mtodo mtodo um trecho de cdigo escrito com o intuito de executar uma tarefa especfica. Cada mtodo tem um nome que usamos para execut-lo. Mtodos tambm podem receber parmetros, que sero usados em sua execuo. Em geral, um mtodo bastante similar a uma funo, com 2 diferenas principais: - um mtodo recebe implicitamente o objeto do qual foi executado - pode operar utilizando dados e outros mtodos contidos dentro da classe do objeto.

jQuery para iniciantes Sintaxe e seletores

inShare2 Publicado em Desenvolvimento, Tutoriais, por Domnico Citrngulo No captulo anterior voc usou seletores para selecionar os elementos html que queria manipular e ento aplicou alguns mtodos a esses elementos. Essa maneira de escrever e criar seus comandos jQuery muito comum e usada em praticamente tudo o que voc for criar daqui pra frente.

Sintaxe jQuery
Chamamos esse modo de escrita de sintaxe bsica do jQuery. Vamos relembrar, pois importante entender como ela funciona:

Ento podemos dizer que quando usamos o jQuery, sempre selecionamos um dado elemento da pgina e aplicamos um mtodo a este elemento. Isso significa que boa parte da sua habilidade em programar e desenvolver usando o jQuery depende da sua capacidade em selecionar corretamente os elementos da pgina. isso que vamos aprender agora.

Seletores
possvel usar os seletores jQuery para selecionar elementos de vrias maneiras diferentes. As trs principais so: - Por tag: Seleciona todos os elementos da mesma tag. Exemplos: $(p) : Seleciona todos os <p> da pgina; $(div) : Seleciona todos os <div> $(a) : Seleciona todos os <a> - Por class: Seleciona todos os elementos da mesma classe. Exemplos: $(.linkmenu) : Seleciona todos os elementos da classe linkmenu (Ex. <a class=linkmenu>); $(.subtitulo) : Seleciona todos os elementos da classe subtitulo $(.banner) : Seleciona todos elementos da classe banner; - Por id: Seleciona o primeiro elemento que tenha o id especificado. Exemplos: $(#menu) : Seleciona o primeiro elemento que tenha o id menu (Ex. <div id=menu>); $(#titulo) : Seleciona o primeiro elemento que tenha o id titulo $(#rodape) : Seleciona o primeiro elemento que tenha o id rodape;

Combinando seletores
Outra coisa que voc pode fazer combinar esses diferentes tipos de seletores, como voc j faz no css. Sempre que voc colocar um seletor na frente de outro separado por um espao significa que deseja selecionar dentro do primeiro. Por exemplo: $(#menu a) : Seleciona todos os <a> que estiverem dentro de #menu. Se a pgina tiver outros <a> fora do #menu, estes no sero selecionados.; $(#menu .sel) : Seleciona todos os elementos de classe sel que estiverem dentro de #menu; $(div #link) : Seleciona os elementos de id link que estiverem dentro de um <div>; Se voc no separar as palavras, selecionar os elementos que contenham a classe ou id especificado:

$(div.sel) : Seleciona apenas as <div> que tiverem a class sel; $(div#link) : Seleciona apenas as <div> que tiverem o id link; Estas so as formas mais bsicas dos seletores jQuery. Existem muitas outras opes, operadores e maneiras de selecionar elementos na pgina, mas por enquanto vamos ficar com essas. Garanto que j possvel fazer coisas incrveis utilizando apenas estes seletores.

Criar uma boa procura de menu flutuante com jQuery Easing

05 de outubro de 2009 Kevin Liew 22 comentrios Tutoriais

Demonstrao
Anncio

de Download

Introduo
Neste tutorial, estamos prestes a aprender a criar um menu flutuante. Sim, um efeito flutuante usando jquery.easing, animar uma imagem png valor superior e. O que ele faz , no mouse sobre o item de menu ir flutuar, e no mouse para fora, ele ir afundar. Muito simples, mas parece muito atraente.

1. HTML
O seguinte o layout html. Lembre-se sempre manter o html mais limpo possvel. A classe selecionada. permitir jquery detectar o item selecionado.

1. <Ul 2. 3. 4.

id = "menu" > <li> <a <li> <a <Li href = "#" > item 1 </ a> </ li> href = "#" > Item 2 </ a> </ li> class = "item3" > <a href = "#" > Item 3 </ a>

class = "selected"

</ li> 5. 6. <li> <a <li> <a href = "#" > Item 4 </ a> </ li> href = "#" > Item 5 </ a> </ li>

7. </ Ul>

2. CSS
Consulte a tabela abaixo, que o layout desse menu float.

E tambm, vamos usar a soluo rpida para a imagem png png estamos usando neste tutorial.

1. # Menu 2. 3. 4. 5.

list-style: nenhum ; padding: 0 ; margin: 0 auto ;;

height: 70px ;

6. 7. } 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28.

width: 600px ;

# Menu li { float: esquerda ; width: 109px ; height: 70px ; Posio: parente ; overflow: hidden ; }

Menu # li a

posio: absoluto ; top: 20px ; text-indent: -999em ; background: url ( menu.png ) no-repeat display: bloco ; width: 109px ; height: 70px ; 0 0 ;

/ * Rpida correo png para o IE6 * / Posio: parente ; " IMG "&& this.src.toLowerCase () . indexOf (' . png ')> -1 ? ( this.runtimeStyle.backgroundImage = " nenhum ",

29. this.runtimeStyle.filter = " progid: DXImageTransform.Microsoft.AlphaImageLoader ( src = '"+ this.src + "', sizingMethod = ' image ') ", 30. this.src = 31. this.runtimeStyle.filter = " progid: DXImageTransform.Microsoft.AlphaImageLoader ( src = '"+ this.origBg + "', sizingMethod = ' colheita ') ",

32. this.runtimeStyle.backgroundImage = " nenhum ")), this.pngSet = verdadeiro ));

3. Javascript
Este um script de jQuery simples, o que ele faz simplesmente definir o valor superior a 0 e definir o valor padro se no topo do mouse para fora. Estamos usando o plugin jQUery.easing, isso significa que voc pode ter o efeito de animao diferente. :)

1. $ ( documento ). pronto ( funo 2. 3. 4. 5. 6. 7.

()

/ / Obtm o valor mximo padro var top_val = $ ( '# menu de li a' ). css ( 'top' );

/ / Animar o item de menu selecionado $ ( "# menu de li.selected ' ). crianas ( 'a' ). parar (). animar ( { top : 0 } , { easing : 'easeOutQuad' , durao : 500 } );

8. 9. 10. 11. 12. 13. { easing : 14. 15. 16. 17. 18. top_val } , 19. / / Definir a posio de default $ ( este ). crianas ( 'a' ). parar . () animar ( { top : { easing : 'easeOutQuad' , durao : 500 } ); } , funo () { / / Animar o item de menu com 0 valor superior $ ( este ). crianas ( 'a' ). parar (). animar ( { top : 0 } , 'easeOutQuad' , durao : 500 } ); $ ( "# menu de li ' ). pairar ( funo () {

20. fixa 21.

/ / Mantenha sempre o item selecionado anteriormente em posio

$ ( "# menu de li.selected ' ). crianas ( 'a' ). parar (). animar ( { top : 0 } , ); { easing : 'easeOutQuad' , durao : 500 }

22. 23. 24. 25. } ); );

Concluso
Tutoriais como este? Voc pode expressar sua gratido por visitar meus patrocinadores na barra lateral, marc-la e me ajudar a espalhar esse tutorial para os nossos amigos! :) Obrigado!

http://www.webmaster.pt/menu-jquery-9730.html

Como fazer um menu animado suave com jQuery

J viu algum excelente navegao jQuery que deixou Voc est querendo fazer uma de sua preferncia? Hoje vamos procurar fazer isso atravs da construo de um menu e anim-la com alguns suaves efeitos.

http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/

A Meta - Um menu Suave

Aqui est uma demonstrao de que ns vamos acabar com at o final.

Introduo - Uma explicao de aliviar

O menu tem uma animao to suave por causa de uma coisa chamada "flexibilizao". Do Adobedefinio the Flash Developer Center um pouco mais completa:

"A flexibilizao termo refere-se acelerao ou desacelerao gradual durante uma animao, o que ajuda suas animaes parecem mais realistas. A atenuao cria uma aparncia mais natural da acelerao ou desacelerao ajustando gradualmente a taxa de mudana. "
Graas magia do plugin jQuery Easing, agora podemos usar facilitando fora de ambientes de Flash e Actionscript. Faa o download no site oficial do projeto .

Passo 1 - Definir a estrutura

Antes de iniciar qualquer jQuery, temos que construir uma estrutura de menu rpido com XHTML e carregar os arquivos do projeto necessrios. Faa nova documentos javascript XHTML, CSS, e. Eu escolhi para nomear cada um dos meus "animated-menu". Faa duas pastas no diretrio raiz para as imagens e JavaScript. Anexei um screenshot da minha

estrutura de pastas para esclarecer:

Nada fora do comum

aqui. Comece por carregar nas bibliotecas necessrias e arquivos externos na cabea. Eu escolhi para carregar jQuery do Google cdigo arquivo on-line, enquanto o plugin aliviar de cima colocado na pasta "js". a ordem de carregamento importante !
ver plain copy to clipboard print ?

1. <DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" 2. "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 3. 4. < html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en" lang = "en"> 5. < cabea >

6. 7. 8. 9. 10. 11.

< meta http-equiv = "Content-Type" content = "text / html; charset = UTF8" /> < ttulo > Suave jQuery Menu Animado </ title > < ligao rel = "stylesheet" href = "animado-menu.css" />

< roteiro src = "http://jqueryjs.googlecode.com/files/jquery1.3.js" tipo= "text / javascript" > </ script de > 12. < roteiro src = "js/jquery.easing.1.3.js" tipo = "text / javascript" > </script de > 13. < roteiro src = "animado-menu.js" tipo = "text / javascript" > </ script de > 14. </ cabea >

Em seguida, copie nesta estrutura de menus para o corpo:

ver plain copy to clipboard print ?

1. < corpo > 2. < p > Rollover um item de menu para expandi-lo. </ p > 3. < ul > 4. < li class = "green" > 5. < p > < a href = "#" > Incio </ a > </ p > 6. < p class = "subtexto" > A primeira pgina </ p > 7. </ li > 8. < li class = "amarelo" > 9. < p > < a href = "#" > Sobre o </ a > </ p > 10. < p class = "subtexto" > Mais informaes </ p > 11. </ li > 12. < li class = "red" > 13. < p > < a href = "#" > Contato </ a > </ p > 14. < p class = "subtexto" > Entre em contato </ p > 15. </ li > 16. < li class = "blue" > 17. < p > < a href = "#" > Enviar </ a > </ p > 18. < p class = "subtexto" > Envie-nos seu material! </ p > 19. </ li > 20. < li class = "roxo" > 21. < p > < a href = "#" > Termos </ a > </ p > 22. < p class = "subtexto" > coisas legais </ p > 23. </ li > 24. </ ul > 25. </ corpo > 26. </ html > Os itens de menu tem uma classe atribudo a ela que vai designar a cor do bloco. Dentro de cada bloco de menu um ttulo e subttulo que ficaro ocultas por padro.

Passo 3 - Estilo com CSS

Agora que a estrutura do menu est no lugar, vamos adicionar alguns estilos bsicos para neaten-se e organizar o menu horizontal. Overflow deve ser definido a transbordar para cada item da lista. Isto ir assegurar que a legenda para cada item no exibir at que a altura se expande para ajustar.
ver plain copy to clipboard print ?

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38.

body { font-family : "Lucida Grande" , fundo : # F3F3F3 ; } ul { Margem : 0; preenchimento : 0; } li { width : 100px ; Altura : 50px ; flutuador : esquerda ; cor : # 191919 ; text-align : center ; estouro : oculto ; } a { cor : # FFF ; text-decoration : nenhum ; } p { preenchimento : 0px } . Subtexto { padding-top : 15px ; } / . . . . . * MENU Classes Cor * / verde { fundo : # 6AA63B ;} amarelo { fundo : # FBC700 ;} vermelha { fundo : # D52100 ;} roxo { fundo : # 5122B4 ;} azul { fundo : # 0292C0 ;} 5px ;

arial ,

sans-serif ;

Passo 4 - Animar com jQuery

Todo o nosso cdigo jQuery vai para o arquivo javascript criado anteriormente. Ele ser chamado de "animado-menu.js" se voc estiver seguindo o meu modelo.
ver plain copy to clipboard print ?

1. $ (Document). Pronto ( funo () { 2. 3. / / Quando o mouse passa por cima 4. $ ( "li" ). mouseover ( funo () { 5. $ ( este ). stop () animar ({height:. '150px ' }, {fila: falso , durao: 6. 7. 8. 9. 10.
600, facilitando: }); 'easeOutBounce' })

/ / Quando o rato removida $ ( "li" ). mouseout ( funo () { $ ( este ). stop () animar ({height:. '50px ' }, {fila: falso , durao: 600, facilitando: 'easeOutBounce' }) 11. });

12. 13. });

H duas aes no cdigo acima. Quando o mouse se move sobre um item de menu, o item inicia uma animao onde ele se expande para 150px de altura sobre 0,6 segundos. A flexibilizao aplicada atravs do plugin 'easeOutBounce ", que faz com que a caixa para" saltar "um pouco, uma vez que atinge o fim da animao (" out "). Quando o mouse movido para fora a animao para o tamanho de partida acionado. Se voc estiver usando isso dentro do contexto de um site maior, simplesmente substituir o elemento selecionado (atualmente "li") para os eventos do mouse para o selector necessrio. O mtodo stop () preso antes de o animar, a fim de evitar um buffer de prdio onde a animao se repetir vrias vezes, se o mouse movido rapidamente sobre ele. Um artigo sobre jQuery Aprender cobre esta soluo em maior profundidade.

Passo 5 - Adicione Alguns Flair

Eu adicionei imagens de fundo para cada um dos itens de menu na verso ao vivo e arquivos de origem para ilustrar algumas possibilidades de design. Existem muitas outras maneiras criativas para adicionar alguma personalidade para o menu. V em frente e experimentar. Se voc chegar a qualquer coisa notvel, no se esquea de compartilh-lo com a gente nos comentrios.