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.