Javascript: Fade in, Fade out
Posted by: Rogério Alencar Lino Filho on: 15 Janeiro, 2008
- In: CSS| Geral| Javascript
- Comment!
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)
9 Respostas para "Javascript: Fade in, Fade out"
21 Janeiro, 2008 às 6:42 pm
Olá Rogério, estou aqui de volta com um site em que quero fazer um fade. Vamos lá ver se resulta pá! Bom site, boas dicas vou voltar mais para ver o que cá tens. Abraço
13 Março, 2008 às 2:30 pm
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.
25 Abril, 2008 às 4:27 pm
bom esse tuto, gostei pela sua portabilidade (Ie, FF, Safari, Opera), muito interessante.
valew!
15 Maio, 2008 às 7:03 pm
Com o Mozilla Firefox o efeito funciona, mas com o IE7 não. Tem alguma dica?
11 Agosto, 2008 às 9:41 pm
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
24 Junho, 2009 às 2:38 pm
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
3 Julho, 2009 às 10:57 am
Garoto!
Meus parabens!
Código simples, limpo e eficiente!
Muito bom mesmo!
Abraço,
Thomas
17 Janeiro, 2008 às 4:07 pm
Legal esse script cara.