JavaScript – exemplo com div de efeito sanfona – fade in fade out

<script language="javascript">

	/**
    * @describe: Duas funcões que trabalham em par para fazer o feito esconder (fadein)e aparecer (fadeout)
    * @author :    Richard D. LeCour (from)
    * @namespace: http://www.richardsramblings.com/?p=486
    ********
    * @update by: Ricardo Spinoza (ricardospinoza@yahoo.com.br)
    * @date: 15 maio 2006
    * @sintaxe:
    *       slowly.fadein('id')  -> id: id da tag, fadein apaga div
    *       slowly.fadeout('id') -> id: id da tag, fadeout acende div
    * example:
    *       <div id="teste" style="widht: 200px; height: 220px; color: red;">
	*		este é um teste
	*		</div>
	*		<input type="button" onclick="javascript:slowly.fadein('teste');">
	*		<br>
	*		<input type="button" onclick="javascript:slowly.fadeout('teste');">
    *
    * @version: 1.0
	*/
    var opacityin = 96; // Avoid starting at 100% due to Mozilla bug
	var opacityout = 0; // Avoid starting at 100% due to Mozilla bug
	var slowly = {
		fadein : function (id) {
			this.fadeLoopin(id, opacityin);
		},
		fadeLoopin : function (id, opacityin) {
			var o = document.getElementById(id);
			if (opacityin >= 5) {
				slowly.setOpacityin(o, opacityin);
				//opacityin -= 4;
				opacityin -= 8;
				window.setTimeout("slowly.fadeLoopin('" + id + "', " + opacityin + ")", 50);
			} else {
				o.style.display = "none";
			}
		},
		setOpacityin : function (o, opacityin) {
			//alert("objeto.name: "o.name +" valor opacidade: "+ opacityin);
			o.style.filter = "alpha(style=0,opacity:" + opacityin + ")";// IE
			o.style.KHTMLOpacity = opacityin / 100;	// Konqueror
			o.style.MozOpacity = opacityin / 100;	// Mozilla (old)
			o.style.opacity = opacityin / 100;		// Mozilla (new)
		},
		fadeout : function (id) {
			this.fadeLoopout(id, opacityout);
		},
		fadeLoopout : function (id, opacityout) {
			var o = document.getElementById(id);
			if (opacityout <=100) {
				o.style.display = "block";
				slowly.setOpacityout(o, opacityout);
				//opacityout += 4;
				opacityout += 8;
				window.setTimeout("slowly.fadeLoopout('" + id + "', " + opacityout + ")", 50);
			}
		},
		setOpacityout : function (o, opacityout) {
			o.style.filter = "alpha(style=0,opacity:" + opacityout + ")";// IE
			o.style.KHTMLOpacity = opacityout / 100; // Konqueror
			o.style.MozOpacity = opacityout / 100;   // Mozilla (old)
			o.style.opacity = opacityout / 100;		 // Mozilla (new)
		}
	}
	</script>

Disponibilizei um exemplo de uso pra galera no link exemploUsoFadeInFadeOut.html

Anúncios

Deixe um comentário

Arquivado em JavaScript/Afins

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s