Como animar um div de exibição nenhum bloquear em jquery

Cascading Style Sheets desenvolvedores ajuda do site mostrar, esconder e animar objetos em um site. Se sua página tem um elemento DIV oculto, você pode usar javascript para fazer essa DIV aparecem gradualmente mudando seu estilo de exibição de "Nenhum" para "quadra" utilizando um temporizador. É preciso um pouco de conhecimento de programação para que isso aconteça. Usando jQuery, uma biblioteca javascript cross-browser, você pode gerar este impressionante fade-in efeito usando uma única linha de código.

Navegar até o site do jQuery e exibir seu código jQuery. Ele aparece dentro janela do seu navegador. Clique navegador do seu "Arquivo" Menu e clique em "Salvar como." o "Salvar como" janela se abre. Esta janela exibe as pastas localizadas em seu disco rígido.

Localize a pasta que contém um documento HTML que você gostaria de usar para testes. Clique duas vezes em que pasta para abri-la e clique em "Salve " para salvar o arquivo jQuery para essa pasta.

Inicie um editor de HTML ou bloco de notas. Abra o documento HTML e cole o seguinte código no documento de "cabeça" seção:

Adicione o seguinte código HTML no seu documento de "" seção:

coloque este "animateStyle" função no documento de "roteiro" seção: função animateStyle (divId) {$ ("#" + DivId) Css ({ "exibição": "quadra", "opacidade": "0" }).animar({ "opacidade": "1" }, 3000) -} Esta função contém uma única instrução jQuery. o "CSS" função, visto no início da instrução, muda o estilo de apresentação do DIV para "quadra," em seguida, define sua opacidade para zero. Isso mantém o momentaneamente invisível DIV. o "animar" função anima propriedade opacidade da DIV, alterando o nível de opacidade de zero a 100 por cento. Isto cria o efeito de fade-in. O último valor na declaração, 3000, é o "duração" valor. Ele determina quanto tempo leva para a DIV de fade in..

Cole o código CSS abaixo no documento de "cabeça" seção: Sua DIV, criado no "corpo" seção, referências desta classe. Esta classe faz com que o DIV invisível, definindo seu valor de exibição para "Nenhum."

Guardar este documento, e abri-lo em qualquer navegador. O DIV contendo o número não aparecerá porque a classe CSS, "divStyle" define seu valor de exibição para "Nenhum. Clique no "Mudança de estilo" botão. O código jQuery funciona e muda o estilo de apresentação do DIV para "quadra." Isso faz com que o DIV contendo o desbotamento parágrafo em lentamente.

Gorjeta

• Verifica Alterar a duração da animação para qualquer valor que você gosta, alterando os "3000" para outro número. Valores mais altos fazem a animação prazo mais longo e mais curtos acelerá-lo. Você pode precisar experimentar com esses valores para encontrar um que cria o fade-in efeito desejado sem tomar muito tempo.

Referências

• ligação W3Schools: jQuery CSS CSS () Método
• ligação jQuery: Animate () API jQuery

Sobre o autor

Depois de especialização em física, Kevin Lee começou a escrever profissionalmente em 1989, quando, como um desenvolvedor de software, ele também criou artigos técnicos para o Centro Espacial Johnson. Hoje, este Texas cowboy urbano continua a marcha para fora software de alta qualidade, bem como artigos não-técnicos, abrangendo uma multiplicidade de diversos temas que vão desde jogos para assuntos atuais.