Javascript: Fade in, Fade out

Ver post no novo domínio: http://rogeriolino.com/2008/01/15/javascript-fade-in-fade-out/

Um efeito muito legal de transição é o fade, aonde o objeto surge gradativamente (in) ou some (out). Com o auxílio do CSS, definido pelo próprio javascript, usando opacity (alpha) conseguimos montar um exemplo.

Passando dois parâmetros a gente define o alvo (id do elemento HTML) e o tempo de demora da execução do efeito.

Ex.:

fadeOut(id, time)

fadeIn(id, time)

Exemplo em funcionamento aqui.

13 thoughts on “Javascript: Fade in, Fade out

  1. Acemir Mendes

    Olá Rogério, gostaria de saber como fazer para incorporar esse script em um botão como um rollorver, para quando passar o mouse por cima, ocorrer o FADE IN, e quando tirar o mouse ocorrer o FADE OUT, só consigo fazer usando o flash, mas já vi alguns sites que utilizam outra maneira. Isso pode deixar um site bastante estiloso =P
    Parabéns pelo site, estou sempre aprendendo coisas novas através de seus artigos.
    Muito Obrigado.

    Responder
  2. Kallyver

    Intimou!!!

    Fiz um Menu expansível com fade In, o fade out não deu muito certo para o que eu desejava (mais por burrice ou preguiça minha mesmo), mas parabéns pelo exemplo, realmente incrível!

    Abraços

    Responder
  3. Felipe

    Muito bom mesmo.. só tenho uma duvida.. eu to tentando colocar 2 divs no lugar do id, por exemplo:
    javascript:fadeOut(‘alvo’,’alvo2′, 0.1) mas isso num ta funcionando. vc sabe o pq?

    abraço

    Responder
  4. dandan

    achei legal esse efeito que vc conseguiu fazer usando o filtro alpha mas existe um filtro chamado Fade que faz o mesmo efeito nao sei se vc conhece

    Responder

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s