Como animar uma DIV mudando o display de "none" para "block" com JQuery

Escrito por kevin lee | Traduzido por weber figueiredo
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como animar uma DIV mudando o display de "none" para "block" com JQuery
Atraia os visitantes do seu site adicionando efeitos de fade-in na página com o JQuery (BananaStock/BananaStock/Getty Images)

O CSS (Cascading Style Sheets) ajuda os desenvolvedores a mostrar, esconder e animar objetos em um site. Se sua página tiver um elemento DIV oculto, você pode usar o JavaScript para fazê-lo aparecer gradualmente mudando seu estilo de exibição (display) de "none" para "block" usando um temporizador. É preciso um pouco de conhecimento em programação para fazer isso acontecer. Usando jQuery (uma biblioteca JavaScript) você pode gerar este efeito de fade-in usando apenas uma linha de código.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Acesse o site do jQuery e observe seu código. Ele aparece dentro da janela do seu navegador. Clique no menu "Arquivo" e clique em "Salvar como". A janela de "Salvar como" aparecerá. Ela mostra as pastas localizadas em seu disco rígido.

  2. 2

    Localize uma pasta contendo documentos HTML que você queira usar para testes. Dê um duplo clique para abrir e clique em "Salvar" para salvar o arquivo do JQuery dentro dela.

  3. 3

    Abra um editor de HTML ou o Notepad. Abra agora o documento HTML e cole o seguinte código na seção "head":

    <script src="jquery-1.6.2.min.js" type="text/javascript" />

    Essa declaração permite o uso da biblioteca JQuery dentro do seu código.

  4. 4

    Adicione o código abaixo dentro de "<body>":

    <div id="MyDiv1" class="hidden"> <p>Paragraph inside div</p> </div>

    <input id="Button2" type="button" value="button2" onclick="return animateStyle('MyDiv1')" />

    A primeira linha do código cria uma DIV. Ela contém um parágrafo e um botão. Quando clicado, ele transforma a id da DIV em uma função JavaScript chamada "animateStyle".

  5. 5

    Coloque a função "animateStyle" no seção "script" do documento:

    function animateStyle(divID) { $("#" + divID).css({ "display": "block", "opacity": "0" }).animate({ "opacity": "1" }, 3000); }

    Essa função contém uma declaração simples de JQuery. A função CSS no início da declaração muda o display da DIV para "block" e, em seguida, define a sua opacidade como zero. Isso mantém o DIV temporariamente invisível. A função "animate" altera a opacidade da DIV, mudando seu nível de zero para 100%. Isso cria o efeito de fade-in. O valor 3000 na declaração é o tempo de duração. Ele determina quanto tempo a DIV levará para desaparecer (fazer o fade-in).

  6. 6

    Cole o código CSS abaixo na seção "head" do documento:

    <style type="text/css"> .hidden {display:none;} </style>

    A DIV criada no "body" faz referência a essa classe. Tal classe torna a DIV invisível alterando a propriedade "display" para "none".

  7. 7

    Salve o documento e abra no navegador. A DIV contendo o parágrafo não aparecerá, porque a classe "divStyle" define seu display para "none". Clique no botão "Change Style". O código JQuery será executado e mudará o display da DIV "block". Isso faz a DIV contendo o parágrafo desaparecer lentamente.

Dicas & Advertências

  • Altere a duração da animação mudando o "3000" para outro valor. Valores mais altos fazem a animação ser mais lenta. Valores menores a tornam mais rápida. Talvez seja necessário testar esses valores para encontrar o efeito desejado.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível