w3Opacity - Efeitos de opacidade em elementos HTML com JavaScript
January 15th, 2007. Published under DOM, add-on, javascript, labs, w3opacity. 9 Comments.
Eu havia criado anteriormente o w3FadingOpacity, mas agora ele se chama w3Opacity.
w3Opacity são recursos em JavaScript para você trabalhar com efeitos de opacidade em elementos HTML de forma fácil, simples e prática.
Com o w3Opacity será simples realizar Fade Out, Fade In, Toogle de Fade, Definir opacidade e consultar a opacidade de elementos HTML. Veja alguns exemplos:
Exemplo de um Fade Out
w3Opacity.fading('img_fadeout',100,0,600);
Onde, img_fadeout é o ID do objeto; 100 é a opacidade inicial e 0 a final; 600 é o tempo em milisegundos que o efeito irá durar.
Exemplo de um Fade In
w3Opacity.fading('img_fadein',0,100,600)
Percebeu a diferença entre o Fade Out? Exatamente, a opacidade inicial é menor do que a final, somente.
Exemplo de Toggle de Fade
w3Opacity.toggle('img_togglefade',600);
O Toggle de fade funciona assim: o método - toggle - consultará a opacidade do elemento HTML, se ele estiver visÃvel será realizado um Fade Out, caso contrário, um Fade In.
Como definir Opacidade
Definir opacidade em elementos HTML com o w3Opacity é super simples, observe:
w3Opacity.set('img_set',30);
onde img_set é o ID do objeto e 30 é a opacidade desejada, ou seja, 30% de opacidade.
Como consultar a Opacidade de um objeto
Utilize o método get_opacity para tal, assim:
w3Opacity.get_opacity('img_get_opacity');
Há outros projetos no meu Labs.
9 Comments
leandro on January 16th, 2007
Olá Jader,
Obrigado pela sugestão 
Seria uma boa alternativa de implementação em um Update future no w3Opacity.
Se você puder por gentileza, postar sua sugestão aqui: http://leandro.w3invent.com.br/labs/forum/viewforum.php?id=10 agradeceria muito. Uma vez que gostaria de manter as sugestões ao w3Opacity em um único lugar.
Um abraço.
helder on January 16th, 2007
viva brasuca..
bem tou acompanhando desde o inicio este negocio do freedoom.. e confesso que th usado e th gostado mt mesmo..
esta funsao me agradou mt, e achei mt simples e pratica.. acho que vai ajudar mt, pelomenos a mim.. eu ja usava uma do sajax, mas confesso que esta me agradou mt mais..
um abraço e fico a espera de mais novinhas coisas…
leandro on January 17th, 2007
Valeu portuga,
Um abraço e fique sempre por aÃ.
felipe p rodrigues on January 17th, 2007
olá, gostaria de trocar informacoes c vc, sei bastante tb de javascript e no ano passado criei uma validacao de formulario q torna mto mais simples o uso para os leigos e gostaria de quem sabe ate me juntar c vc para programar juntos isso seria mto bom, pois poderia recriar com base nesse freedom q realmente é mto bom mais ainda pode ser melhor.
caso tenha enterese (sem compromisso) entre em contato comigo pelo meu email
flww
leandro on January 17th, 2007
Olá Felipe,
Obrigado pelo contato.
Eu criei o w3FormValidation que tem esse mesmo propósito, confira aqui: http://leandro.w3invent.com.br/labs/
Um abraço.
adISCom on December 24th, 2007
Êîìïàíèÿ International Shop Company â ëèöå óïðàâëÿþùèõ êîìïàíèè ïîçäðàâëÿåò âàñ ñ Íîâûì 2008 Ãîäîì!!!! Íà äàííûé ìîìåíò â ñåòè “web” îòêðûëñÿ íîâûé èíòåðíåò ìàãàçèí International Shop Company.  äàííîì èíòåðíåò-ìàãàçèíå: âû íàéä¸òå àáñîëþòíî âñ¸; ìàêñèìàëüíî-âûñîêèå ÑÊÈÄÊÈ íà âåñü òîâàð (îáúÿâëåíà ïðåäíîâîãîäíÿÿ ðàñïðîäàæà); ìàêñèìàëüíî-ñæàòûå ñðîêè äîñòàâêè; óíèêàëüíàÿ ïàðòí¸ðñêàÿ ïðîãðàììà!!! Íàø àäðåññ â èíòåðíåòå: http://www.insgc.hocom.by
http://www.insgc.hocom.by
Daniel Cavalcante Scalisse on January 17th, 2008
Bacana mesmo.
No momento estou procurando algo mais simples com css.
Existe?
Jader Rubini on January 16th, 2007
Interessante… Mas não seria mais interessante trabalhar com CLASSes em vez de ID’s? Desta maneira eu posso setar uma classe única pra todos os objetos que eu gostaria que tivessem opacidade.